VUE-cli3使⽤svg-sprite-loader
VUE-cli3使⽤ svg-sprite-loader
的插件，⽤来根据导⼊的 svg ⽂件⾃动⽣成 symbol 标签并插⼊ html，接下来就可以在模版中⽅便地使⽤ svg-sprite 技术了。使⽤ svg-sprite 的好处
页⾯代码清爽
可使⽤ ID 随处重复调⽤
每个 SVG 图标都可以更改⼤⼩颜⾊
安装插件
npm install svg-sprite-loader --save-dev
webpack 配置，在fig.js加⼊处理 svg 的 loader：
const path = require('path')
function resolve(dir) {
return path.join(__dirname, '.', dir)
}
chainWebpack: config => {
//const svgRule = dule.rule('svg')
//svgRule.uses.clear()
.rule('svg-sprite-loader')
.test(/\.svg$/)
.include
.
add(resolve('src/icons')) //处理svg⽬录
.end()
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.options({
symbolId: 'icon-[name]'
})
},
configureWebpack: () => ({
// resolve: {
//  alias: require('./fig').webpack
/
/ }
// module: {
//  rules: [{
//  test: /\.svg$/,
//  use: [{
//    loader: "svg-sprite-loader",
//    options: {
//    symbolId: 'icon-[name]'
//    }
//  }]
//  }]
/
/ }
})
svg实例}
这时候发现还是不⾏啊， body 中并没有看到 symbol 标签。
就是说只有我们⾃⼰引⼊的 svg ⽂件需要经过 svg-sprite-loader，那么就将这些 svg 统⼀放到⼀个⽬录下，我这⾥放到了src/icons
然后要在⽤到的地⽅引⼊需要的svg
import './src/icon/target.svg';
重新启动项⽬，终于在 html 中看到了 symbol 标签！
配置好了，就可以⽤了。使⽤⽅法很简单，相较于原来插⼊ svg 图标的⽅法（img src 或将 svg 整个写⼊ html），⽤ svg-sprite 更加简单且清爽：
<svg><use xlink:href="#target" /></svg>
嗯，就这样短短⼀⾏。 xlink:href 中传⼊ svg ID 就好了，由于在上⾯的配置⽂件中我们直接使⽤⽂件名作为 symbol 的 ID，所以这⾥传⼊的 ID 即为你想显⽰的图标的 svg ⽂件名，记得加上 # 。
⾃动导⼊
你会发现，这⾥要想插⼊某个图标，都得 import ，每⽤⼀个都要重复⼀遍这个流程，太⿇烦，那么我们就让 src/icons/svg/下的 svg ⽂件都⾃动导⼊吧。
webpack 可以帮我们做到：
// requires and returns all modules that match
const requireAll = requireContext => requireContext.keys().map(requireContext);
// import all svg
const req = t('./assets/svg', true, /\.svg$/);
requireAll(req);
代码实例:
⾸先在main.ts中引⼊import './icons/index',
icons/index.js，将icons/svg中的所有svg导⼊并注册全局组件SvgIcon
//SvgIcon组件代码
<template>
<svg :class="svgClass" aria-hidden="true">
<use :xlink:href="iconName"/>
</svg>
</template>
<script>
export default {
name: 'SvgIcon',
props: {
iconClass: {
type: String,
required: true
},
className: {
type: String,
default: ''
}
},
computed: {
iconName() {
return `#icon-${this.iconClass}`
},
svgClass() {
if (this.className) {
return 'svg-icon ' + this.className
} else {
return 'svg-icon'
}
}
}
}
</script>
<style scoped>
.svg-icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
接下来就可以使⽤组建了
关于 t 的详细⽤法，可以参考 webpack ⽂档：dynamic requires
这样⼀来，每当我们修改或增加新的 svg，只要将⽂件往这个⽬录下⼀扔，插件就会⾃动帮我们⽣成相应的 symbol 标签啦，接下来就只管⽤吧

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。