Vue项目中svg-icon组件的基本使用

一、基本了解

首先，我们先了解一下什么是SVG格式百度百科：SVG格式
SVG是一种图像文件格式，它的英文全称为Scalable Vector Graphics，意思为可缩放的矢量图形。它是基于XML（Extensible Markup Language），由World Wide Web Consortium（W3C）联盟进行开发的。严格来说应该是一种开放标准的矢量图形语言，可让你设计激动人心的、高分辨率的Web图形页面。用户可以直接用代码来描绘图像，可以用任何文字处理工具打开SVG图像，通过改变部分代码来使图像具有交互功能，并可以随时插入到HTML中通过浏览器来观看。此类图像文件的扩展名为（xxx.svg）
学习网站：SVG 教程

二、基本使用步骤

（一）安装依赖

npm i svg-sprite-loader@4.1.3

（二）配置vue.config.js

const path=require('path')functionresolve(dir){return path.join(__dirname, dir)}{// 省略其他...// 与devServer配置项同级chainWebpack(config){// set svg-sprite-loader
    config.module.rule('svg').exclude.add(resolve('src/icons')).end()
    config.module.rule('icons').test(/\.svg$/).include.add(resolve('src/icons')).end().use('svg-sprite-loader').loader('svg-sprite-loader').options({
        symbolId:'icon-[name]'}).end()}}

（三）创建文件/文件夹

（1）src/icons 文件夹

src/icons
+       /svg# 文件夹内保存图标 .svg文件 .svg是一种通过代码的方式来展示的图片格式
+       /index.js# 注册全局组件

svg文件夹内的图标
建议下载网站阿里巴巴矢量图标库

下载步骤 （需登陆后下载）

第一步 搜索需要的图标样式

第二步 复制svg代码

第三步

在src/icons/svg下，建立一个名为qq.svg的文件（文件名是可以任意取的），并把上一步中复制的代码粘过来。

第四步

等待使用

index.js 内代码

// index.js 内代码import Vuefrom'vue'import SvgIconfrom'@/components/SvgIcon'// svg component svg组件// register globally 全局注册
Vue.component('svg-icon', SvgIcon)const req= require.context('./svg',false,/\.svg$/)constrequireAll=requireContext=> requireContext.keys().map(requireContext)requireAll(req)

（2）svg组件

src/componets/SvgIcon/index.vue

<!-- 组件内基本样式 --><template><divv-if="isExternal":style="styleExternalIcon"class="svg-external-icon svg-icon"v-on="$listeners"/><svgv-else:class="svgClass"aria-hidden="true"v-on="$listeners"><use:xlink:href="iconName"/></svg></template><script>/* doc: https://panjiachen.github.io/vue-element-admin-site/feature/component
/svg-icon.html#usage */import{ isExternal}from'@/utils/validate'exportdefault{
  name:'SvgIcon',
  props:{
    iconClass:{
      type: String,
      required:true},
    className:{
      type: String,default:''}},
  computed:{isExternal(){returnisExternal(this.iconClass)},iconName(){return`#icon-${this.iconClass}`},svgClass(){if(this.className){return'svg-icon '+this.className}else{return'svg-icon'}},styleExternalIcon(){return{
        mask:`url(${this.iconClass}) no-repeat 50% 50%`,'-webkit-mask':`url(${this.iconClass}) no-repeat 50% 50%`}}}}</script><stylescoped>.svg-icon{width: 1em;height: 1em;vertical-align: -0.15em;fill: currentColor;overflow: hidden;}.svg-external-icon{background-color: currentColor;mask-size: cover!important;display: inline-block;}</style>

（3）validate.js

utils/validate.js

/**
 * @param {string} path
 * @returns {Boolean}
 */exportfunctionisExternal(path){return/^(https?:|mailto:|tel:)/.test(path)}/**
 * @param {string} str
 * @returns {Boolean}
 *//* export function validUsername(str) {
  const valid_map = ['admin', 'editor']
  return valid_map.indexOf(str.trim()) >= 0
} */

（四）在main.js中引入

import'@/icons'// icon 文件夹

（五）使用

<svg-iconicon-class="文件名"/><!-- 这里的文件名就是在src/icons/svg下的文件名(例如qq.svg) -->