vue封装一个svg组件

在上一章内容我们简单介绍了一下svg，顺便安利一波张鑫旭大佬的文章 未来必热：SVG Sprites技术介绍。

建立svg资源存储路径

新建src/assets/svg目录，所有svg图片都放在这个目录下面。

svg_path.png

安装项目依赖

• 安装svgo和svgo-loader插件
  npm install svgo svgo-loader -D

SVG文件，尤其是从各种编辑器导出的文件，通常包含许多冗余和无用的信息。这可以包括编辑器元数据，注释，隐藏元素，默认值或非最佳值以及可以安全删除或转换而不会影响SVG渲染结果的其他内容。
SVGO ptimizer是用于优化SVG矢量图形文件的基于Node.js的工具。

• 安装svg-sprite-loader插件
  npm install svg-sprite-loader -D

最小的初始配置。大多数选项是自动配置的。
浏览器的运行时。精灵会自动呈现并注入页面中，您只需通过引用图像即可。
node / browser的同构运行时。可以在服务器或浏览器中手动渲染精灵。
可定制的。编写/扩展运行时模块以实现自定义的sprite行为。编写/扩展运行时生成器以生成您自己的运行时，例如，使用导入的符号配置的React组件。
为从css / scss / sass / less / styl / html导入的图像生成外部精灵文件（SVG堆栈技术）。

配置webpack.base.conf.js文件

module: {
  rules: [
    ...
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        exclude: [resolve('src/assets/icons')],   // 去除你存放svg的那个文件夹，改用svgo-loader处理
        options: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },
    {
      test: /\.svg$/,
      use: [
        {loader: 'svg-sprite-loader', options: {}},
        {
          loader: 'svgo-loader', options: {
            plugins: [
              {removeViewBox: false},   // viewBox尽可能删除属性
              {removeXMLNS: true}   // 删除xmlns属性（对于内嵌svg，默认情况下处于禁用状态）
            ]
          }
        }
      ],
      include: [resolve('src/assets/icons')]   // 把上面去掉的文件夹include进来
    }
  ]
}

创建svg组件

在src/components目录下建立SvgIcon.vue文件

在父组件中使用svg组件

import svgIcon from '@/components/SvgIcon'

export default {
  components: {
    svgIcon
  }
}

altman.png