loader:'svg-sprite-loader', include: [resolve('src/icons')], options: { symbolId:'icon-[name]'//去掉svg这个图片加载不出来} }, { test:/\.(png|jpe?g|gif|svg)(\?.*)?$/, loader:'url-loader',//这个不处理svg图片,因为我们独立拆开让svg-sprite-loader来处理了exclude: [resolve('src/i...
一、安装组件svg-sprite-loader npminstallsvg-sprite-loader--save-dev||yarnaddsvg-sprite-loader 二、在src/components下新建文件夹及文件SvgIcon/index.vue,index.vue添加如下内容: 在这里插入图片描述 <template><svgv-else:class="svgClass"aria-hidden="true"v-on="$listeners"><use:xlink:href="iconName...
第一步首先 npminstall svg-sprite-loader--save 在assets文件夹下创建icons文件夹用来存放svg文件夹和index.js文件 index.js 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 importVue from'vue' importSvgIcon from'@/components/SvgIcon' // 注册全局组件 Vue.component('svg-ico...
清除了默认的SVG处理规则。 添加了svg-sprite-loader来处理SVG文件。 设置了SVG图标的ID格式为icon-[name]。 添加了SvgSpriteLoaderPlugin来生成SVG精灵图。 3. 在vue3组件中引入SVG图标 现在你可以在Vue组件中引入SVG图标了。假设你有一个名为icon.svg的图标文件,你可以在组件中这样引入: vue <template>...
loader('svg-sprite-loader') .options({ symbolId: 'icon-[name]' }) .end() } module.exports = defineConfig({ 、、、 chainWebpack: config => { // 自定义svg配置 svgConfig(config) // 显示的开启Props解构默认值 config.module .rule('vue') .use('vue-loader') .tap((options) => { ...
一、安装组件svg-sprite-loader npm install svg-sprite-loader --save-dev 二、在src/components下新建文件夹及文件SvgIcon/index.vue,index.vue中内容如下 <template><svg:class="svgClass"aria-hidden="true"v-on="$listeners"><use:xlink:href="iconName"/></svg></template>export default { name: "...
1.1 安装 svg-sprite-loader npm i svg-sprite-loader 安装svg-sprite-loader。 通过vue-cli脚手架创建的项目默认会使用url-loader处理SVG,所以需要处理。 1.2 在 webpack.base.conf 中配置 svg 依赖和加载器 使用include、include 和 img 来区分。 然后修改 webpack.base.conf.js 配置,让 svg-sprite-loader ...
1.安装svg-sprite-loader,这里使用的是6.0.11版本 npm install svg-sprite-loader 2.项目的svg图片存放在src/icons/svg下,我们在这里创建两个文件svgIcon.ts和svgIcon.vue(在哪创建和文件名字并没有任何要求) 3.在svgIcon.ts中加入下列代码(如果报错找不到fs模块请跳转到文章末尾 附录-导入@type/node) ...
先安装svg-sprite-loader 代码语言:shell 复制 npmi svg-sprite-loader-D 在vue.config.js中添加loader配置,以前webpack配置都写在webpack.config.js中,后来改了。 这里的include中指定svg的目录,test是目标svg的正则表达式,symbolId是加载的svg图标的新命名,在原本svg的name之前,加了一个local-前缀。
0.SvgIcon全局组件 全局组件是指在应用程序的任何位置使用的组件,使用全局组件前需要在Vus.js实例中注册,并将其挂载到实例中。全局组件是可复用的Vus.js实例。 1.安装依赖svg-sprite-loader npm install svg-sprite-loader -D 安装成功后,在package.json文件中可以看到安装成功的版本号 ...