使用vite搭建的vue3.0 ts项目中使用svg图标方法:
1,安装 vite-plugin-svg-icons
npm i vite-plugin-svg-icons -D
2,vite.config.ts 中的配置插件
import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import viteSvgIcons from 'vite-plugin-svg-icons'; import path from 'path'; export default defineConfig({ plugins: [ vue(), /** * 把src/icons 下的所有svg 自动加载到body下,供组件使用 */ viteSvgIcons({ // 指定需要缓存的图标文件夹,地址可改 iconDirs: [path.resolve(process.cwd(), 'src/assets/svg')], // 指定symbolId格式 symbolId: 'icon-[dir]-[name]', }), ] })
3,在 src/main.ts 内引入注册脚本
import 'virtual:svg-icons-register';
4,封装svg-icon组件:/src/components/SvgIcon.vue
<template> <svg aria-hidden="true"> <use :xlink: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>
5,使用 ,如app组件中:/src/App.vue
<template> <div> <SvgIcon name="icon1"></SvgIcon> <SvgIcon name="icon2"></SvgIcon> <SvgIcon name="icon3"></SvgIcon> <SvgIcon name="dir-icon1"></SvgIcon> </div> </template> <script> import { defineComponent, computed } from 'vue'; import SvgIcon from './components/SvgIcon.vue'; export default defineComponent({ name: 'App', components: { SvgIcon }, }); </script>
注:icon1,icon2 等是放在src/assets/svg文件夹下的icon1.svg ,icon2.svg 文件。
问题:想实现一张大的svg图全屏的效果,尺寸却是很小,无论怎么控制width,也全屏不了
待后续解决之后补充。
原文链接:https://github.com/anncwb/vite-plugin-svg-icons/blob/main/README.zh_CN.md