preface

Leisure time to write articles, can write how much to write how much, mainly used to summarize and improve their own technology stack, check the gaps. The last article improved the use of HTTP request tools, this article mainly introduces the use of icon icon management plug-in.

Previous post portal

Build Vite2+Vue3 Family barrel from zero (2)

Icon Icon Management

Here we use the vite-plugin-svG-icons \textrm\color{red}{vite-plugin-svG-icons} plugin to manage SVG ICONS

Vite – plugin – SVG – the ICONS

  • Preloading, all ICONS are generated while the project is running, and dom manipulation is required only once
  • High-performance built-in cache that regenerates files only when they are modified

Install vite – plugin – SVG – the ICONS

# node version: >=12.0.0 # vite version: >=2.0.0 NPM I vite-plugin-svG-icons -dCopy the code

Modify the vite. Config. Js

Import viteSvgIcons from 'vitite-plugin-svG-icons' plugins: [vue(), viteSvgIcons({// Configure the path to store the SVG file in your SRC: [path.resolve(process.cwd(), 'src/icons')], symbolId: 'icon-[name]' }) ]Copy the code

Encapsulate the SvgIcon component

Create the svgIcon common component

Create the SvgIcon directory in the SRC/Components directory and index.vue in the SvgIcon directory

  <template>
    <svg aria-hidden="true" class="svg-icon">
      <use :xlink:href="symbolId" :fill="color" />
    </svg>
  </template>

  <script>
  import { defineComponent, computed } from 'vue'

  export default defineComponent({
    name: 'SvgIcon',
    props: {
      prefix: {
        type: String,
        default: 'icon'
      },
      name: {
        type: String,
        required: true
      },
      color: {
        type: String,
        default: 'white'
      }
    },
    setup(props) {
      const symbolId = computed(() => `#${props.prefix}-${props.name}`)
      return { symbolId }
    }
  })
  </script>
  <style scoped>
  .svg-icon {
    width: 1em;
    height: 1em;
    fill: currentColor;
    vertical-align: middle;
  }
  </style>

Copy the code

ICONS directory structure

# src/icons

- password.svg
- username.svg
- ...
Copy the code

Modify the main js

 import 'virtual:svg-icons-register' 
 import SvgIcon from '@/components/SvgIcon/index.vue' 

 const app = createApp(App)
 app.component('svg-icon', SvgIcon)

Copy the code

SvgIcon is used in vUE components

<template>
...
 <svg-icon name="password"  />
...
</template>
Copy the code

Portal to the future

Build Vite2+Vue3 Family barrel from zero (2)

Build Vite2+Vue3 Family barrel from zero (1)

Architecture design based on Vue