How to use the svg icon in vue3+vite

Most people do not understand the knowledge points of this article "how to use the svg icon in vue3+vite", so the editor summarizes the following, detailed content, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "how to use the svg icon in vue3+vite" article.

Vite-plugin-svg-icons

Preload generates all icons when the project is running, and you only need to operate the dom once

High-performance built-in cache that is regenerated only when the file is modified

Installation

Node version: > = 12.0.0 vite version: > = 2.0.0

Yarn add vite-plugin-svg-icons-D# ornpm I vite-plugin-svg-icons-D# orpnpm install vite-plugin-svg-icons-D

Use

Configuration plug-ins in vite.config.ts

Import {createSvgIconsPlugin} from 'vite-plugin-svg-icons'import path from' path'export default () = > {return {plugins: [createSvgIconsPlugin ({/ / specify the icon folder to be cached iconDirs: [path.resolve (process.cwd (), 'src/icons')], / / specify symbolId format symbolId:' icon- [dir]-[name]' / * Custom insertion location * @ default: body-last * / inject?: 'body-last' |' body-first' / * custom dom id * @ default: _ _ svg__icons__dom__ * / customDomId:'_ _ svg__icons__dom__' }),],}}

Introduce registration scripts into src/main.js

Import 'virtual:svg-icons-register'

How to use in components

Create a SvgIcon component

/ src/components/SvgIcon/index.vue

Import {computed} from 'vue'const props = defineProps ({prefix: {type: String, default:' icon'}, name: {type: String, required: true}, color: {type: String, default:'# 333'}, size: {type: String, default: '1em'}) const symbolId = computed () = > `# ${props.prefix}-${props.name}`)

Icons directory structure

# src/icons- icon1.svg- icon2.svg- icon3.svg- dir/icon1.svg

Registering components globally

# src/main.jsimport {createApp} from 'vue'import App from'. / App.vue'import router from'. / router'import ElementPlus from 'element-plus'import' element-plus/dist/index.css'import svgIcon from "@ / components/SvgIcon/index.vue"; import 'virtual:svg-icons-register'createApp (App) .use (ElementPlus) .use (router) .component (' svg-icon', svgIcon) .mount ('# app')

Page usage

{{props.title}} const props = defineProps ({icon: {type: String, default:''}, title: {type: String, default:''}})

Get all SymbolId

Import ids from 'virtual:svg-icons-names'// = > [' icon-icon1','icon-icon2','icon-icon3'] the above is about "how to use the svg icon in vue3+vite". I believe we all have some understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about it, please follow the industry information channel.