Shulou(Shulou.com)05/31 Report--

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.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.