npm install svg-sprite-loader --save-dev 6.配置vue.congfig.js chainWebpack: (config) => { //配置 svg-sprite-loader // 第一步:让其他svg loader不要对src/icons进行操作 config.module .rule('svg') .exclude.add(resolve('src/SvgIcon/svg'))//注意:路径要具体到存放的svg的路径下,不然会报错...
首先我们需要初始化一个 Vite + Vue + TS 的项目,这里使用 pnpm 作为包管理工具,当然你也可以使用 npm 或者 yarn。 pnpm create vite svg-example --template vue-tscdsvg-example pnpm install pnpm run dev 添加Svg 插件 创建项目后会有一个 vue 的图标,我们就使用这个图标来展示。 我们需要安装一个插件来...
1、安装插件:vite-plugin-svg-icons // 通过命令安装2个插件npm i vite-plugin-svg-icons-D npm i fast-glob-D 如图所示: //package.json"devDependencies":{"@types/node":"^18.7.13","@vitejs/plugin-vue":"^3.0.3","fast-glob":"^3.2.12","sass":"^1.54.5","typescript":"^4.6.4","vit...
<template><svgaria-hidden="true"class="svg-icon":width="props.size":height="props.size"><use:xlink:href="symbolId":fill="props.color"/></svg></template>import{computed}from'vue'constprops=defineProps({prefix:{type:String,default:'icon'},name:{type:String,required:true},color:{type:St...
首先，初始化项目。使用
Vue3中级指南-如何在vite中使用svg图标 - 掘金 (juejin.cn)[https://juejin.cn/post/7091253193988014110]
// index.vue<template><svg:class="svgClass"aria-hidden="true"><use:xlink:href="iconClassName":fill="color"/></svg> </template>import{computed}from'vue'constprops=defineProps({iconName:{type:String,required:true},className:{type:String,default:''},color:{type:String,default:'#409eff...
首先我们需要初始化一个 Vite + Vue + TS 的项目,这里使用 pnpm 作为包管理工具,当然你也可以使用 npm 或者yarn。 pnpm create vite svg-example --template vue-tscdsvg-example pnpm install pnpm run dev 添加Svg 插件 创建项目后会有一个vue的图标,我们就使用这个图标来展示。
import'virtual:svg-icons-register' AI代码助手复制代码 如何在组件中使用 创建SvgIcon组件 /src/components/SvgIcon/index.vue <template><svgaria-hidden="true"class="svg-icon":width="props.size":height="props.size"><use:xlink:href="symbolId":fill="props.color"/></svg></template>import{ comput...
// Vue4.x 在根目录新建 vue.config.js 中配置如下:constpath =require('path')module.exports= {// 使用svg-sprite-loader编译svg,若使用file-loader时排除src/icon下的svg矢量图标chainWebpack:(config) =>{constsvgRule = config.module.rule('svg')// 清除已有的所有 loader 否则接下来的 loader 会附...