自定义组件svg的用法

自定义组件svg的用法

我的使用场景：因为有好几个都用到svg图，而且大小布局都一样，所以就有了这个自定义组件。
效果图：

第一步 ： 在components中创建一个svgIcon.vue文件

aria-hidden属性的作用： 把 aria-hidden=“true” 加到元素上会把该元素和它的所有子元素从可访问性树上移除。这样做可以通过隐藏下列内容来提升使用辅助技术的用户体验：
1、纯装饰性的内容，如图标、图片
2、重复的内容，如重复的文本
3、屏幕外或被折叠的内容，如菜单

<template>
  <svg :class="['svg-icon', svgClass]" aria-hidden="true" v-  on="$listeners">
    <use :xlink:href="`#icon-${name}`" />
  </svg>
</template>

<script>
export default {
  props: {
    name: {
      type: String,
      default: ''
    },
    svgClass: {
      type: String,
      default: ''
    }
  }
}
</script>

<style lang="scss" scoped>
//1、在css中，currentColor是一个变量，这个变量的值是当前元素的color值。
2、如果当前元素没有在CSS里显示地指定一个color值，那它的颜色值就遵从CSS规则，从父元素继承而来。
.svg-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

第二步：在assets中创建svg文件夹

把用用到的svg都统一放到这个文件夹里面

第三步： 创建一个js文件注册这个组件

可以把这个js文件放assets的js文件夹里面，也可以放其他地方，看个人的习惯

文件的代码如下：

import Vue from 'vue'
import SvgIcon from '@/components/svgIcon.vue'

Vue.component('svg-icon', SvgIcon)// 注册组件名称为svg-icon

const req = require.context('@/assets/svg', false, /\.svg$/)
const requireAll = (requireContext) => requireContext.keys().map(requireContext)
requireAll(req)

第四步： 局部使用组件或者全局使用

1、如果是要局部使用的话，在哪个vue组件使用这个svg-icon组件就要引入这个js文件即可

2、如果是全局使用，就把该js文件引入到man.js即可

第五步：得要在vue.config.js配置

sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      })
    config.module
      .rule('images')
      .test(/\.(png|jpe?g|gif|bmp|webp)(\?.*)?$/)
      .exclude.add(resolve('src/assets/svg'))
      .end()
      .use('url-loader')
      .loader('url-loader')
      .options({
        limit: 8000,
        name: 'img/[name].[hash:7].[ext]',
        publicPath: assetsPublicPath
      })
  }
}

第六步： 使用svg-icon组件

item.icon就是svg的名称

 <svg-icon class="svg" :name="item.icon" />

如果使用了svg图还是没有出现，那就下载插件，下载完重启就可以了。

npm i svg-sprite-loader --save

svg的注册跟使用也就介绍完毕。