vue集成svg-sprite-loader

最新推荐文章于 2025-09-11 08:44:32 发布

原创最新推荐文章于 2025-09-11 08:44:32 发布 · 921 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript #svg

Vue 专栏收录该内容

66 篇文章

订阅专栏

本文介绍了如何在Vue项目中使用SVG图标精灵(symbol)，包括工作原理、优缺点、安装配置、组件化使用方法以及全局注册和引入。通过这种方式，可以减少图片请求，提高页面加载速度，同时便于图标管理和颜色调整。但要注意，这种方法不支持多色和渐变色图标，且在部分旧版浏览器中兼容性不佳。

1.工作原理

利用svg的symbol元素，将每个icon包括在symbol中，通过use元素使用该symbol

2.svg-sprite优缺点

优点：

修改ID就可以改变图标，使用方便。
页面代码量小，维护成本低。
图标可改变颜色大小，减少重复图片的加载
减少图片请求量。

缺点：

多色、渐变色等无法通过色值改变图标颜色，需要设计师重新设计图标。
浏览器渲染性能一般。
浏览器兼容性不佳，支持ie9+，现代浏览器。

3.安装和使用

1.安装

npm install -save-dev  svg-sprite-loader@5.1.1

2.在vue.config.js中配置

function resolve (dir){
    return path.join(__dirname,dir)
}
chainWebpack(config) {
    // 已有配置排除掉svg
    config.module.rule("svg")
        .exclude.add(resolve('src/icons'));
    //配置svg
   config.module
      .rule('svg')
      .exclude.add(resolve('src/assets/icons'))// 处理SVG目录
      .end()
    config.module
      .rule('icons')
      .test(/\.svg$/)
      .include.add(resolve('src/assets/icons'))
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      })
      .end()
  }

3.下载icon并放在 src/assets/icons/svg

下载网址:https://www.iconfont.cn/

https://icomoon.io/app/

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0OcQ4Osg-1651813271025)(D:\study\项目\前端\vue+elementui\vue+elementui.assets\image-20220506125037439.png)]

4.组件化

目前使用图标需要import引入图标，svg画图，再写公共样式。可以再简化一点，将这些内容放到公共组件内。组件内容如下：

<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>
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.注册全局组件

src/assets/icons/index.js

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

// 注册全局组件
Vue.component('svg-icon', SvgIcon)
//  import所有符合条件的svg 三个参数：文件夹、是否使用子文件夹、正则
const req = require.context('./svg', false, /\.svg$/)
// 遍历require.context的返回模块，并导入
const requireAll = requireContext => requireContext.keys().map(requireContext)
requireAll(req)

现在只需要在页面直接使用svg-icon组件，修改icon-class就可以展示icon了。

6.在main.js中引入上面index.js

import '@/assets/icons' // icon

7.使用

<svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />