webpack 插件 svg-sprite-loader

最近开始看 Vue 了，首先用官方的模版把项目快速搭建起来：Vue.js 提供一个官方命令行工具，可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置，带来现代化的前端开发流程。只需几分钟即可创建并启动一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目。现在的项目 webpack 几乎是标配了，各种插件好用到爆。现在我们要接触的是一个叫 svg-sprite

zb0567

18136人浏览 · 2017-09-15 09:23:20

zb0567 · 2017-09-15 09:23:20 发布

最近开始看 Vue 了，首先用官方的模版把项目快速搭建起来：

Vue.js 提供一个官方命令行工具，可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置，带来现代化的前端开发流程。只需几分钟即可创建并启动一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目。

现在的项目 webpack 几乎是标配了，各种插件好用到爆。现在我们要接触的是一个叫 svg-sprite-loader 的插件，用来根据导入的 svg 文件自动生成 symbol 标签并插入 html，接下来就可以在模版中方便地使用 svg-sprite 技术了。

使用 svg-sprite 的好处

如果不知道 svg-sprite 是什么，可以参考大神张鑫旭的文章：未来必热：SVG Sprite技术介绍

页面代码清爽
可使用 ID 随处重复调用
每个 SVG 图标都可以更改大小颜色

安装插件

1	npm install svg-sprite-loader --save-dev

webpack 配置

装好插件之后，配置 webpack，加入处理 svg 的 loader：

     
     
      
      {
     
     
     
       
      
      test: 
      
      /\.svg$/,
     
     
     
       
      
      loader: 
      
      'svg-sprite?' + 
      
      JSON.stringify({
     
     
     
         
      
      name: 
      
      '[name]',
     
     
     
         
      
      prefixize: 
      
      true,
     
     
     
     
      
        }),
     
     
     
     
      
      }

这时候发现还是不行啊，body 中并没有看到 symbol 标签。

细看发现，还有一个loader 中也处理了 svg 文件：

那么就把那个 svg 去掉吧，不然下面的 svg-sprite-loader 无法起效… OK，又报错了：

由于我用了 element.js 作为 UI 框架，它的包里有个 svg 文件需要刚才的 loader 处理，我们把所有的 svg 文件都交由 svg-sprite-loader 处理了，所以这里报了错。

也就是说只有我们自己引入的 svg 文件需要经过 svg-sprite-loader，那么就将这些 svg 统一放到一个目录下，我这里放到了 src/assets/svg/ ，再修改 loader 配置。

上面 loader 匹配正则中的 svg 不用去掉了，给它加上 exclude ，不去处理 src/assets/svg/ 路径下的 svg 文件：

     
     
      
      {
     
     
     
       
      
      test: 
      
      /\.(png|jpe?g|gif)(\?.*)?$/,
     
     
     
       
      
      exclude: [
     
     
     
     
      
        	path.resolve(__dirname, 
      
      '../src/assets'),
     
     
     
     
      
        ],
     
     
     
       
      
      loader: 
      
      'url',
     
     
     
       
      
      query: {
     
     
     
         
      
      limit: 
      
      10000,
     
     
     
         
      
      name: utils.assetsPath(
      
      'img/[name].[hash:7].[ext]'),
     
     
     
     
      
        }
     
     
     
     
      
      }

下面 svg-sprite-loader 的配置中加上 include，只处理 src/assets/svg/ 路径下的 svg 文件：

     
     
      
      {
     
     
     
       
      
      test: 
      
      /\.svg$/,
     
     
     
       
      
      include: [
     
     
     
     
      
        	path.resolve(__dirname, 
      
      '../src/assets'),
     
     
     
     
      
        ],
     
     
     
       
      
      loader: 
      
      'svg-sprite?' + 
      
      JSON.stringify({
     
     
     
         
      
      name: 
      
      '[name]',
     
     
     
         
      
      prefixize: 
      
      true,
     
     
     
     
      
        }),
     
     
     
     
      
      }

重新启动项目，终于在 html 中看到了 symbol 标签！

如何使用

配置好了，就可以用了。使用方法很简单，相较于原来插入 svg 图标的方法（img src 或将 svg 整个写入 html），用 svg-sprite 更加简单且清爽：

1	import './assets/svg/target.svg';

1	<svg> <use xlink:href="#target" /> </svg>

嗯，就这样短短一行。xlink:href 中传入 svg ID 就好了，由于在上面的配置文件中我们直接使用文件名作为 symbol 的 ID，所以这里传入的 ID 即为你想显示的图标的 svg 文件名，记得加上 #。

自动导入

你会发现，这里要想插入某个图标，都得 import，每用一个都要重复一遍这个流程，太麻烦，那么我们就让 src/assets/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);

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

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

文章转自：https://cisy.me/webpack-svg-sprite/

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^