}.svg-icon{stroke:currentColor;fill:currentColor;cursor:pointer;margin-bottom:0.125em;vertical-align:middle;height:1em;width:1em;}.svg-icon .icon-spin{animation:icon-spin 2s infinite linear;}@keyframes icon-spin{from { transform:rotate(0deg);}to{transform:rotate(359deg);}} 注册组件,我的是在...
.rule('svg-sprite') .test(/\.svg$/) // 处理svg目录 .include.add(resolve('src/assets/icons/')) .end() .use('svg-sprite-loader') .loader('svg-sprite-loader') .options({ symbolId: 'icon-[name]' }) .end() .before('svg-sprite-loader') .use('svgo-loader') .loader('svgo-l...
1.安装 svg-sprite-loader svgo npm i svg-sprite-loader svgo 2.创建SvgIcon组件 <template> <svg :class="svgClass" aria-hidden="true"> <use :xlink:href="iconName"></use> </svg> </template> export default { name: 'svg-icon', props: { iconClass: { type: String, required: true ...
1、在对应vue项目里添加插件 vue add svg-sprite 输入Y 2、再执行 npm install svgo svgo-loader --save-dev 然后你就会看到 自动新增 的根目录文件vue.config.js和src/components/SvgIcon.vue,如图: 3、在main.js里注册SvgIcon组件 //引入svg组件 import SvgIcon from '@/components/SvgIcon.vue' //全局...
意思就是:需要配置一个插件名字,想看官网的去这里:https://github.com/svg/svgo 上个图: 不多说了上代码: chainWebpack:config=>{config.resolve.alias.set('@$',resolve('src'))config.module.rules.delete('svg')//重点:删除默认配置中处理svg,config.module.rule('svg-sprite-loader').test(/\.svg...
1、安装svg-sprite-loader和svgo插件 yarn add svg-sprite-loader svgo 2、在components文件夹下面增加svgIcon.vue组件 // svgIcon.vue <template> <svg :class="svgClass" aria-hidden="true" :width="swidth" :height="sheight"> <use :xlink:href="iconName" /> </svg> </template> export defau...
svg图标放大不失真,png会出现失真现象。一、方法一1、在对应vue项目里添加插件vueaddsvg-sprite输入Y2、再执行npminstallsvgosvgo-loader--save-dev然后你就会看到自动新增的根目录文件vue.config.js和src/components/SvgIcon.vue,如图: 3、在main.js里注册SvgIcon组件 ...
loader('svgo-loader') .end() .use('svg-sprite-loader') .loader('svg-sprite-loader') .options({ symbolId: 'icon-[name]' }) .end() }, publicPath: '', outputDir: undefined, assetsDir: undefined, runtimeCompiler: undefined, productionSourceMap: false, parallel: undefined, css: ...
{test:/\.svg$/,use:[{loader:'svg-sprite-loader',options:{}},{loader:'svgo-loader',options:{plugins:[{removeViewBox:false},// viewBox尽可能删除属性{removeXMLNS:true}// 删除xmlns属性(对于内嵌svg,默认情况下处于禁用状态)]}}],include:[resolve('src/assets/icons')]// 把上面去掉的文件夹...
Loader has built-inSVGOsupport for SVG optimization. Sprite option works only withVue Single File Componentapproach. Vue CLI Vue 3projects created viaVue CLIaren't built on top ofWebpack, they use Vite (which is build on top ofRollup) instead. In this case, this loader won't work. Ple...