Vue-svg小图标使用以及配置文件步骤详解

提示：本章节技术分享为针对Vue中如何快速使用svg小图标进行配置文件步骤详解

---

前言

提示：svg小图标作为前端点缀页面不可缺少的元素之一,怎样配置文件才能快速使用小图标是我们需要快速了解的

---

提示：以下是本篇文章正文内容，下面案例可供参考,svg小图标可以参考阿里巴巴矢量图库进行下载.

1.文件配置步骤

1.安装loader

npm i svg-sprite-loader@4.1.3

2.配置vue.config.js

在其中配置代码如下：

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()
  }

3.配置相对文件及创建一个svg图标的组件

配置相对文件地址为：

src\utils\validate.js

代码为：

export function isExternal(path) {
  return /^(https?:|mailto:|tel:)/.test(path)
}

创建一个svg图标的组件地址为：

src\components\SvgIcon\index.vue

在其中配置代码如下：

<template>
  <div v-if="isExternal" :style="styleExternalIcon" class="svg-external-icon svg-icon" v-on="$listeners" />
  <svg v-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'

export default {
  name: 'SvgIcon',
  props: {
    iconClass: {
      type: String,
      required: true
    },
    className: {
      type: String,
      default: ''
    }
  },
  computed: {
    isExternal() {
      return isExternal(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>

<style scoped>
.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>

4.创建icons文件夹，在index.js中注册成全局组件

地址为：

src\icons\index.js

代码为：

import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon'// svg component

// register globally
Vue.component('svg-icon', SvgIcon)

// 将icons/svg/下所有的svg图片映射成svgIcon组件的class名字
const req = require.context('./svg', false, /\.svg$/)
const requireAll = requireContext => requireContext.keys().map(requireContext)
requireAll(req)

5.在main.js中引入icons/index.js

import '@/icons' // icon

6.收集以及运用

在icons下,创建svg文件夹,收集下载好的svg图片文件,语义化命名,在网站上复制代码粘过来,方便直接引用,复制代码格式如下:

<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M121.718 73.272v9.953c3.957-7.584 6.199-16.05 6.199-24.995C127.917 26.079 99.273 0 63.958 0 28.644 0 0 26.079 0 58.23c0 .403.028.806.028 1.21l22.97-25.953h13.34l-19.76 27.187h6.42V53.77l13.728-19.477v49.361H22.998V73.272H2.158c5.951 20.284 23.608 36.208 45.998 41.399-1.44 3.3-5.618 11.263-12.565 12.674-8.607 1.764 23.358.428 46.163-13.178 17.519-4.611 31.938-15.849 39.77-30.513h-13.506V73.272H85.02V59.464l22.998-25.977h13.008l-19.429 27.187h6.421v-7.433l13.727-19.402v39.433h-.027zm-78.24 2.822a10.516 10.516 0 0 1-.996-4.535V44.548c0-1.613.332-3.124.996-4.535a11.66 11.66 0 0 1 2.713-3.68c1.134-1.032 2.49-1.864 4.04-2.468 1.55-.605 3.21-.908 4.982-.908h11.292c1.77 0 3.431.303 4.981.908 1.522.604 2.85 1.41 3.986 2.418l-12.26 16.303v-2.898a1.96 1.96 0 0 0-.665-1.512c-.443-.403-.996-.604-1.66-.604-.665 0-1.218.201-1.661.604a1.96 1.96 0 0 0-.664 1.512v9.071L44.364 77.606a10.556 10.556 0 0 1-.886-1.512zm35.73-4.535c0 1.613-.332 3.124-.997 4.535a11.66 11.66 0 0 1-2.712 3.68c-1.134 1.032-2.49 1.864-4.04 2.469-1.55.604-3.21.907-4.982.907H55.185c-1.77 0-3.431-.303-4.981-.907-1.55-.605-2.906-1.437-4.041-2.47a12.49 12.49 0 0 1-1.384-1.512l13.727-18.217v6.375c0 .605.222 1.109.665 1.512.442.403.996.604 1.66.604.664 0 1.218-.201 1.66-.604a1.96 1.96 0 0 0 .665-1.512V53.87L75.97 36.838c.913.932 1.66 1.99 2.214 3.175.664 1.41.996 2.922.996 4.535v27.011h.028z"/></svg>

7.使用组件

<svg-icon icon-class="tree" />
// tree为自己定义的命名,直接使用即可
<svg-icon icon-class="user" />

8.下载以及详细学习

.svg是一种通过代码的方式来展示的图片格式（.png, .gif.....）

学习网站：https://www.runoob.com/svg/svg-tutorial.html

在这里去下载你要用的svg:https://www.iconfont.cn/

以上为本章节详细内容.

---

总结

提示：本章节详细讲解了关于Vue中使用svg小图之前,配置文件步骤详情和使用以及下载地址,深入学习相关内容的学习地址板块,详情仅供参考,望大家可以参考到能得到帮助的地方,谢谢!