作者使用了一个插件svg-sprite-loader对 svg 文件做处理,并指定了只对src/icons下的 svg 做处理。在第二个对象中,svg 还用了url-loader做处理,但不对src/icons下的 svg 做处理。(这里如果不想对 svg 使用url-loader的话其实可以在正则里不加 svg,不知道为什么作者还要做个 svg 的正则
vue.config.js里面的操作是删除vue-cli里面对svg的loader处理,然后加上自己对svg的loader处理:在svg-sprite文件夹里面使用svg-sprite-loader,在其它文件夹里面使用file-loader(抄的vue-cli原配置); main.js里面的操作是导入yi-svg-sprite库,并且把svg-sprite文件夹里面的svg文件组装成一个svg雪碧图,id是各自的文件...
<template><svg:class="svgClass"aria-hidden="true"><use:xlink:href="iconName"/></svg></template>exportdefault{name:'SvgIcon',props: {iconClass: {type:String,required:true},className: {type:String,default:''} },computed: {iconName() {return`#icon-${this.iconClass}`},svgClass() {if...
vue-cli 3 基于 webpack-chain ,使用了file-loader,并且把路径指定为在img文件夹下,但我们的 svg 并不在img文件夹,而且svg-sprite-loader已经自带了file-loader的功能,所以,我们可以在我们自定义的vue.config.js文件下将rule(svg)清除: module.exports ={ chainWebpack: config=>{ config.module.rule('svg')...
如图所示:感觉svg 文件资源没有加载上。vue.config.js 文件代码如下: module.exports = { devServer: { port: 8106, }, chainWebpack: (config) => { config.module.rules.delete("svg"); config.module .rule('svg') .exclude.add(resolve('src/icons')) .end() config.module .rule('svg-sprite'...
url'/assets/svg/sprite.svg'path to external SVG file class'icon'CSS class name Vue.use(svgSpritePlugin,{url:'path/to/svg/file.svg',class:'my-class',}) If you want to use an inline SVG, seturlto''. If your spritesheet is "processed" (vue-cli, webpack, …) seturltorequire('....
2、loader 配置规则后,打包svg仍报错。 错误信息如下: 2.9 配置规则如下: rules: [ { test: /\.vue$/, loader: 'vue-loader', options: vueLoaderConfig }, { test: /\.js$/, loader: 'babel-loader', include: [resolve('src'), resolve('test') ,resolve('node_modules/webpack-dev-server/cli...
yarn add svg-sprite-loader -D npm 安装 npm install svg-sprite-loader -D 第二步 在你使用的Vue中找到一个vue.config.js文件,如果没有就创建。 虽然官方文档说的是在webpack开头的文件中操作,但是我们在Vue中没有,所以我们就要将Vue-cli的内容翻译成svg-sprite-loader文档的内容 ...
iconfont symbol对比svg-sprite-loader iconfont symbol在SVG使用上简单,但是对于后期修改不方便。这是一种全新的使用方式,应该说这才是未来的主流,也是平台目前推荐的用法。相关目前symbol方式的iconfont: 支持多色图标了,不再受单色限制。 通过一些技巧,支持像字体那样,通过font-size,color来调整样式。 兼容性较差,支持...
在Vue CLI 5项目中集成和使用svg-sprite-loader,可以方便地将SVG文件作为精灵图(sprite)进行加载和使用,从而优化SVG图标的显示和管理。以下是如何在Vue CLI 5项目中集成和配置svg-sprite-loader的详细步骤: 1. 理解vue-cli5和svg-sprite-loader的基本概念 Vue CLI 5:Vue CLI是一个官方提供的Vue.js项目脚手架工...