在vite中使用svg(vue)(vite中文文档)
使用vite-plugin-svg-icons插件
安装依赖
yarn add vite-plugin-svg-icons -D复制代码
在vite.config.js中使用插件
import viteSvgIcons from 'vite-plugin-svg-icons'; import path from 'path'; export default () => { return { plugins: [ viteSvgIcons({ // 指定要缓存的图标文件夹 iconDirs: [path.resolve(process.cwd(), 'src/icons')], // 执行icon name的格式 symbolId: 'icon-[dir]-[name]', }), ], }; };复制代码
在main.js中引入
import 'virtual:svg-icons-register';复制代码
创建SvgIcon.vue组件
<template> <svg :class="svgClass" aria-hidden="true"> <use :xlink:href="iconName" :fill="color" /> </svg> </template> <script> import { computed } from 'vue' export default defineComponent({ props: { iconClass: { type: String, required: true }, className: { type: String, default: '' }, color: { type: String, default: '' }, }, setup(props) { return { iconName: computed(() => `#icon-${props.iconClass}`), svgClass: computed(() => { if (props.className) { return `svg-icon ${props.className}` } return 'svg-icon' }) } } }) </script> <style scoped> .svg-icon { width: 1em; height: 1em; position: relative; fill: currentColor; vertical-align: -2px; } </style>复制代码
全局使用
在mian.js中加入
import SvgIcon from '@/components/SvgIcon' app.component('svg-icon',SvgIcon)复制代码
组件中使用
import { defineComponent } from 'vue' import SvgIcon from '@/components/SvgIcon' export default defineComponent({ components:{ SvgIcon } })
作者:ChenEirk
链接:https://juejin.cn/post/7036949769842851854
伪原创工具 SEO网站优化 https://www.237it.com/