The project structure

1. First introduce the SVG plug-in

Yarn add svG-sprite-loader -d // or NPM install SVG-sprite-loader -dCopy the code

2. Create a file

Create the ICONS folder in @/ SRC, which will create index.vue(the svgicon template file), index.ts(the JS logic of svgicon), SVG folder (the address where the SVG ICONS are stored).

Index.vue (template file for Svgicon)

This part needs to use fs module, so it needs:

Yarn add fs // or NPM install fsCopy the code
<template> <svg :class="svgClass" v-bind="$attrs" :style="{ color: color }"> <use :xlink:href="iconName"></use> </svg> </template> <script setup lang="ts"> import { computed, defineProps } from 'vue' const props = defineProps({ name: { type: String, required: true }, color: { type: String, default: '' } }) const iconName = computed(() => `#icon-${ props.name }`) const svgClass = computed(() => { if(props.name) return  `svg-icon icon-${ props.name }` return 'svg-icon' }) </script> <style scoped> .svg-icon{width: 1em; height: 1em; fill:currentColor; vertical-align: middle; } </style>Copy the code

Index.ts (SVG JS logic file)

If you have any questions about this part, you can contact me. I wrote the notes.

import { readFileSync, readdirSync } from 'fs' let idPerfix = '' const svgTitle = /<svg([^>+].*?) >/ const clearHeightWidth = /(width|height)="([^>+].*?) "/g const hasViewBox = /(viewBox="[^>+].*?" )/g const clearReturn = / (\ r) | (\ n)/g / / find SVG files function svgFind (e) {const arr = [] const dirents = readdirSync (e. { withFileTypes: true }) for (const dirent of dirents) { if (dirent.isDirectory()) arr.push(... svgFind(e + dirent.name + '/')) else { const svg = readFileSync(e + dirent.name) .toString() .replace(clearReturn, '') .replace(svgTitle, ($1, $2) => { let width = 0, height = 0, content = $2.replace(clearHeightWidth, (s1, s2, s3) => { if (s2 === 'width') width = s3 else if (s2 === 'height') height = s3 return '' }) if (! hasViewBox.test($2)) content += `viewBox="0 0 ${width} ${height}"` return `<symbol id="${idPerfix}-${dirent.name.replace('.svg', '')}" ${content}>` }).replace('</svg>', '</symbol>') arr.push(SVG)}} return arr} // Generate SVG export const createSvg = (path: any, perfix = 'icon') => { if (path === '') return idPerfix = perfix const res = svgFind(path) return { name: 'svg-transform', transformIndexHtml(dom: String) { return dom.replace( '<body>', `<body><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="position: absolute; width: 0; height: 0">${res.join('')}</svg>` ) } } }Copy the code

SVG stores SVG ICONS

3. Reference SVG in viet.config. ts

import { defineConfig } from "vite" import { createSvg } from './src/icons/index' export default defineConfig({ plugins:  [ vue(), createSvg('./src/icons/svg/') ] })Copy the code

4. Write in main.tssvg-iconThe template

import { createApp } from 'vue'
import App from './App.vue'
import svgIcon from './icons/index.vue'

const app = createApp(App)

app
.component('svg-icon', svgIcon)
.mount('#app')
Copy the code

That’s it. (use)

  • Name is the name of SVG
  • Color is the color of SVG

Finally, finally:

Public number: small he growth, the Buddha department more text, are their own once stepped on the pit or is learned things

Interested little partners welcome to pay attention to me oh, I was: he Small Life. Everybody progress duck together