网站建设流程范文,三明鑫龙建设工程网站,外贸销售网站有哪些,十大免费网站推广平台如何在vue2webpack项目中使用svgIcon#xff1f;参考#xff1a;手摸手#xff0c;带你优雅的使用 icon - 掘金
这篇文章主要介绍如何在vue3项目中优雅的使用图标
1、通过 vite-plugin-svg-icons 插件封装SvgIcon组件
npm i vite-plugin-svg-icons -D
2、配置 vite.conf…如何在vue2webpack项目中使用svgIcon参考手摸手带你优雅的使用 icon - 掘金
这篇文章主要介绍如何在vue3项目中优雅的使用图标
1、通过 vite-plugin-svg-icons 插件封装SvgIcon组件
npm i vite-plugin-svg-icons -D
2、配置 vite.config.ts
//插件引入
import { createSvgIconsPlugin } from vite-plugin-svg-icons
import path from pathplugins: [vue(),Components({// UI库resolvers: [ArcoResolver()],}),createSvgIconsPlugin({// 指定需要缓存的图标文件夹iconDirs: [path.resolve(process.cwd(), src/assets/icons)],// 指定symbolId格式symbolId: icon-[dir]-[name],/*** 自定义插入位置* default: body-last*/// inject?: body-last | body-first/*** custom dom id* default: __svg__icons__dom__*/// customDomId: __svg__icons__dom__,}),],
3、配置 tsconfig.json
如果你使用的 Typescript, 可以在 tsconfig.json 配置文件中添加
// tsconfig.json
{compilerOptions: {types: [vite-plugin-svg-icons/client]}
}
4、封装SvgIcon组件 src/components/SvgIcon
templatesvg aria-hiddentrueuse :hrefsymbolId :fillcolor //svg
/templatescript
import { defineComponent, computed } from vueexport 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、同文件夹下创建 index.ts
import { App } from vue;
import SvgIcon from ./SvgIcon;
import virtual:svg-icons-register;const svgIconPlugin {install(app: App): void {// 全局挂载app.component(svg-icon, SvgIcon);},
};export default svgIconPlugin;
6、全局注册 main.ts
import { createApp } from vue;
import App from ./App.vue;import router from ./router/router;// svg封装插件
import svgIcon from /components/svgIcon;createApp(App).use(router).use(svgIcon) .mount(#app);
7、组件中使用
// 只需name绑定成icons目录下的svg文件名即可svg-icon nameheSuan /
