1、先用 vue-cli 创建一个空项目 使用vue create project-name 命令创建一个默认的项目,这个是区别于 cli2.0 的,需要注意下 vue create vue-demo cd vue-demo 2、安装 svg-sprite-loader 依赖 npminstall--save-dev svg-sprite-loader 3、在根目录创建 vue.config.js,并在 vue.config.js 中输入如下配置 ...
首先安装 svg-sprite-loader npm i -D svg-sprite-loader 首先 在src文件下创建 svgIcon 文件夹 文件夹下创建svg存放svg文件,创建index.js index.vue 结构如下: image.png index.js //下面这个是导入svgIcon/svg下的所有svg文件constrequireAll=requireContext=>requireContext.keys().map(requireContext);constre...
npm install svg-sprite-loader -D # via yarn yarn add svg-sprite-loader -D stept3: 创建svgIcon.vue文件 <template> <svg :class="svgClass" v-bind="$attrs" :style="{color: color}"> <use :xlink:href="iconName"/> </svg> </template> import { defineProps, computed } from "vue";...
import{createApp}from'vue'importAppfrom'./App.vue'importsvgIconfrom'./components/svgIcon.vue'createApp(App).component('svg-icon',svgIcon).mount('#app'); stept6: 在plugins文件夹创建svgBuilder.js(重点来了),ts版本参考:https://github.com/JetBrains/svg-sprite-loader/issues/434 ...
npm install svg-sprite-loader -D # via yarn yarn add svg-sprite-loader -D stept3: 创建svgIcon.vue⽂件 <template> <svg :class="svgClass" v-bind="$attrs" :style="{color: color}"> <use :xlink:href="iconName" rel="external nofollow" /> </svg> </template> import { define...
/\.svg$/) const requireAll = requireContent = requireContent.keys().map(requireContent) requireAll(req) 然后就各种资料查找,终于实现了,废话不多说,直接上代码: stept1: 文件目录 stept2: 安装 svg-sprite-loader npm install svg-sprite-loader -D # via yarn yarn add svg-sprite-loader -D step...