在Vue中使用svg图标即封装自定义svg-icon标签

Posted 2020-12-13 zhuji

参考 Vue项目中使用svg图标   这篇软文质量不错, 依葫芦画瓢,也跑通了

1.慢慢在理解其中包含的知识

2. 把自己理解换一种方式表达一下

 我们想在vue页面使用svg图标,例如

<template>
  <div>
    <h1>Svg实践,在页面中使用</h1>
    <svg-icon icon-class="add"></svg-icon>
    <svg-icon icon-class="auto"></svg-icon>
  </div>
</template>

<script>
export default {
  props: {},
  components: {},
  data() {
    return {};
  },
  computed: {},
  created() {},
  mounted() {},
  watch: {},
  methods: {}
};
</script>

参考上面的文章

以上代码是svg的原生用法(正确性未验证)

 

1. src/icons 目录, 导入 svg 资源文件

2. npm install svg-sprite-loader --save-dev =>package.json

3. 配置webpack.base.conf.js（build文件夹中）
//设置Webpack 用 svg-sprite-loader 加载, src/icons 目录的内容,
换一种方式:
1). 在 rules 下增加

{
    test: /.svg$/,
    loader: "svg-sprite-loader",
    include: [resolve("src/icons")],
    options: {
        symbolId: "icon-[name]"
    }
},    

//实际效果是,上面配置后webpack会加载src/icons下的index.js

2). webpack.base.conf.js 原生的 loader: ‘url-loader‘,中去掉svg,就不再额外添加
指令： exclude:[resolve(‘src/icons‘)] ,

如下:

{
    test: /.(png|jpe?g|gif)(?.*)?$/,
    loader: ‘url-loader‘,
    options: {
        limit: 10000,
        name: utils.assetsPath(‘img/[name].[hash:7].[ext]‘)
    }
},

4. 自定义svg组件封装svg功能

基础核心知识
srciconsindex.js 中
import SvgIcon from ‘@/components/SvgIcon‘ 的加载行为
加载 srccomponentsSvgIconindex.vue

<svg :class="svgClass" aria-hidden="true" v-on="$listeners">

在Vue中使用svg图标即封装自定义svg-icon标签
如在 SvgDemo.vue 使用如下标签

<template>
    <div>
        <h1>Svg实践,在页面中使用</h1>
        <svg-icon icon-class="add"></svg-icon>
        <svg-icon icon-class="auto"></svg-icon>
    </div>
</template>