使用svg-sprite-loader引入icon
2020-12-20 本文已影响0人
张德瘦嬢嬢
本篇文章是在 vue-cli 脚手架项目环境下讲解
-
项目需要引入图标，我们在阿里妈妈iconfont下载合适的svg图标，放入assets/icons目录中
引入svg
-
我们尝试在单文件页面xxx.vue中使用，发现typescript报错
使用svg
-
配置好d.ts发现xxx.vue的报错得以解决
d.ts中svg引入的配置
1.安装npm或者yarn
npm install svg-sprite-loader -D
# via yarn
yarn add svg-sprite-loader -D
2. 更改vue.config.js webpack的配置
官方文档说，需要配置在webpack.js中 但是我们项目通过vue-cli搭建的，只有vue.config.js的配置文件。则需要通过官方文档的配置改成vue-cli需要的配置
webpack.js 但是我们这个vue-cli搭建的项目中只有vue.config
{
test: /\.svg$/,
loaders: [
`svg-sprite-loader?${JSON.stringify({ ... })}`,
'svg-transform-loader',
'svgo-loader'
]
}
vue.config.js
const path=require('path')
module.exports = {
lintOnSave: false,
chainWebpack:config=>{
const dir=path.resolve(__dirname,'src/assets/icons')
config.module
.rule('svg-sprite')
.test(/\.svg$/)
.include.add(dir).end() // 包含 icons 目录
.use('svg-sprite-loader').loader('svg-sprite-loader').options({extract:false}).end()
config.plugin('svg-sprite').use(require('svg-sprite-loader/plugin'), [{plainSprite: true}]) //配置loader外还有插件需要配置
config.module.rule('svg').exclude.add(dir) // 其他 svg loader 排除（exclude） icons 目录
}
}
3. svg-sprite-loader的神奇效果
第1步：svg-sprite-loader把svg文件变成了symbol标签（id='svg文件的名字'），然后把这个symbol放到svg里面，然后把这个svg放进body里面
import x from '@/assets/icons/labels.svg'
console.log(x);
image.png
第2步：为什么要把symbol标签又放入svg‘里面呢，因为当引入的svg文件只一个的时候 就不只一个symbol
import x from '@/assets/icons/labels.svg'
import y from '@/assets/icons/money.svg'
console.log(x);
console.log(y);
image.png
第3步：我们可以通过svg-use标签来使用相应的svg图标文件了
<svg>
<use xlink:href="#money"></use>
</svg>
<svg>
<use xlink:href="#labels"></use>
</svg>
4 重复就是原罪
此时我们已经能通过svg里面嵌套有id的use标签来使用svg图标了，但是每个需要使用的svg文件都需要import
import x from '@/assets/icons/labels.svg'
import y from '@/assets/icons/money.svg'
我们时刻谨记着—重复就是原罪，一个项目引用icon少则几十多则上百。
so，我们必须工程化这个问题。
- 一次性引入所有的icon
-
<svg><use xlink:href="#money"></use></svg>程序猿崇尚的简洁美呢？！如此用法很是痛苦麻烦
so 能不能封装成一个组件？？？
