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

最小的初始配置。大多数选项是自动配置的。
浏览器的运行时。精灵会自动呈现并注入页面中，您只需通过引用图像即可<svg><use xlink:href="#id"></use></svg>。
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文件

<template>
  <svg class="svg-icon" aria-hidden="true">
    <use :xlink:href="iconID"/>
  </svg>
</template>

<script>
  export default {
    name: 'SvgIcon',
    props: {
      iconName: {
        type: String,
        required: true
      }
    },
    data () {
      return {
        xml: null
      }
    },
    async created () {
      if (!this.iconName) {
        return
      }
      this.xml = await import('@/assets/svg/' + this.iconName + '.svg')
    },
    computed: {
      iconID () {
        if (!this.xml) {
          return
        }
        return '#' + this.xml.default.id
      }
    }
  }
</script>

<style scoped>
  .svg-icon {
    display: inline-block;
    fill: currentColor;
  }
</style>

在父组件中使用svg组件

import svgIcon from '@/components/SvgIcon'

export default {
  components: {
    svgIcon
  }
}

<svg-icon iconName="aoteman" width="100" height="100"></svg-icon>

altman.png