通过 vite-plugin-svg-icons
插件封装SvgIcon组件
通过命令安装插件
yarn add vite-plugin-svg-icons -D
# or
npm i vite-plugin-svg-icons -D
# or
pnpm install vite-plugin-svg-icons -D
配置 vite.config.ts
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import path from 'path'
plugins: [
vue(),
Components({
resolvers: [ArcoResolver()],
}),
createSvgIconsPlugin({
iconDirs: [path.resolve(process.cwd(), "src/assets/icons")],
symbolId: "icon-[dir]-[name]",
}),
],
配置 main.ts
import 'virtual:svg-icons-register'
封装SvgIcon组件 src/components/SvgIcon
<template>
<svg aria-hidden="true">
<use :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: '#333',
},
},
setup(props) {
const symbolId = computed(() => `#${props.prefix}-${props.name}`)
return { symbolId }
},
})
</script>
全局注册 main.ts
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router/router";
import { createPinia } from "pinia";
const pinia = createPinia();
import ArcoVue from "@arco-design/web-vue";
import "@arco-design/web-vue/dist/arco.css";
import SvgIcon from "@/components/SvgIcon.vue"; +++
import "virtual:svg-icons-register"; +++
createApp(App)
.use(router)
.use(pinia)
.component("svg-icon", SvgIcon) +++
.use(ArcoVue, {
componentPrefix: "arco",
})
.mount("#app");
组件使用 index.vue
// 只需name绑定成icons目录下的svg文件名即可
<SvgIcon name="heSuan" />
实际效果: