这期内容当中小编将会给大家带来有关 svg-sprite-loader如何在VUE-cli3中使用，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。
成都创新互联公司 是一家专注于
成都网站建设 、成都做网站与策划设计,宁海网站建设哪家好?
成都创新互联公司 做网站,专注于网站建设10余年,网设计领域的专业建站公司;建站业务涵盖:宁海等地区。宁海做网站价格咨询:18980820575
svg-sprite-loader 的插件，用来根据导入的 svg 文件自动生成 symbol 标签并插入 html，接下来就可以在模版中方便地使用 svg-sprite 技术了。
使用 svg-sprite 的好处
页面代码清爽
可使用 ID 随处重复调用
每个 SVG 图标都可以更改大小颜色
安装插件
npm install svg-sprite-loader --save-dev webpack 配置,在Vue.config.js加入处理 svg 的 loader：
const path = require('path')
function resolve(dir) {
return path.join(__dirname, '.', dir)
}
module.exports = {
chainWebpack: config => {
config.module.rules.delete("svg"); //重点:删除默认配置中处理svg,
//const svgRule = config.module.rule('svg')
//svgRule.uses.clear()
config.module
.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('./alias.config').webpack
// }
// module: {
// rules: [{
// test: /\.svg$/,
// use: [{
// loader: "svg-sprite-loader",
// options: {
// symbolId: 'icon-[name]'
// }
// }]
// }]
// }
})
} 这时候发现还是不行啊， body 中并没有看到 symbol 标签。
就是说只有我们自己引入的 svg 文件需要经过 svg-sprite-loader，那么就将这些 svg 统一放到一个目录下，我这里放到了 src/icons
然后要在用到的地方引入需要的svg
import './src/icon/target.svg'; 重新启动项目，终于在 html 中看到了 symbol 标签！
配置好了，就可以用了。使用方法很简单，相较于原来插入 svg 图标的方法（img src 或将 svg 整个写入 html），用 svg-sprite 更加简单且清爽：
嗯，就这样短短一行。 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 = require.context('./assets/svg', true, /\.svg$/);
requireAll(req); 代码实例:
首先在main.ts中引入import './icons/index',
icons/index.js,将icons/svg中的所有svg导入并注册全局组件SvgIcon
//SvgIcon组件代码
.svg-icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
接下来就可以使用组建了
上述就是小编为大家分享的 svg-sprite-loader如何在VUE-cli3中使用了，如果刚好有类似的疑惑，不妨参照上述分析进行理解。如果想知道更多相关知识，欢迎关注创新互联成都网站设计公司行业资讯频道。
另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器 、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。
网站标题：svg-sprite-loader如何在VUE-cli3中使用-创新互联
文章地址：
http://cdkjz.cn/article/jjggp.html
