1.0.4 • Published 2 years ago
vite-plugin-svg-qk-icon v1.0.4
插件作用
在vite中使用svg文件时更方便。支持热更新。 注册名称,主要为了解决使用qiankun时多应用使用svg,图标不显示的问题
安装
npm i vite-plugin-svg-qk-icon -D
配置
vite.config.js
import path from 'path';
import {vitePluginSvg} from "vite-plugin-svg-qk-icon";
import {defineConfig} from 'vite';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
// ...other plugin
vitePluginSvg({
// 必要的。必须是绝对路径组成的数组。
iconDirs: [
path.resolve(__dirname, 'src/assets/icons'),
path.resolve(__dirname, 'src/assets/other/icons'),
],
//注册名称,主要为了解决使用qiankun时多应用使用svg,图标不显示的问题
registerModuleName:'virtual:vite-plugin-svg-qrcode-register',
// 必要的。入口script
main: path.resolve(__dirname, 'src/main.js'),
symbolIdFormat: 'icon-[name]'
}),
]
});
示例:在vite+vue3中使用
1、封装公用组件:components/SvgIcon.vue
<template>
<svg class="SvgIcon" aria-hidden="true"><use :xlink:href="symbolId" /></svg>
</template>
<script>
import { defineComponent, computed } from 'vue';
export default defineComponent({
name: 'SvgIcon',
props: {
name: {
type: String,
required: true,
}
},
setup(props) {
const symbolId = computed(() => `#icon-${props.name}`)
return { symbolId }
}
})
</script>
<style scoped>
.SvgIcon {
font-size: inherit;
fill: currentColor;
width: 1em;
height: 1em;
text-indent: 0;
}
</style>
演示:在组件中使用。(或者注册在全局,使用起来更方便)
<template>
<div>
<SvgIcon name="ban"></SvgIcon>
</div>
</template>
<script>
import { defineComponent } from 'vue';
import SvgIcon from './components/SvgIcon.vue';
export default defineComponent({
components: { SvgIcon },
})
</script>
<style scoped>
.SvgIcon {
font-size: 30px;
color: blue;
}
</style>