首页 > 编程 > JavaScript > 正文

VUE-cli3使用 svg-sprite-loader

2019-11-19 12:40:05
字体:
来源:转载
供稿:网友

VUE-cli3使用 svg-sprite-loader

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 更加简单且清爽:

<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 matchconst requireAll = requireContext => requireContext.keys().map(requireContext);// import all svgconst req = require.context('./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>

接下来就可以使用组建了

关于 require.context 的详细用法,可以参考 webpack 文档:dynamic requires

这样一来,每当我们修改或增加新的 svg,只要将文件往这个目录下一扔,插件就会自动帮我们生成相应的 symbol 标签啦,接下来就只管用吧

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表