vue封装svg组件和iconfont文件引入

最新推荐文章于 2025-11-16 13:01:22 发布

原创最新推荐文章于 2025-11-16 13:01:22 发布 · 691 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#svg #vue #组件化

vue 专栏收录该内容

19 篇文章

订阅专栏

本文介绍如何在Vue项目中封装SVG图标为组件，并实现全局调用。通过安装svg-sprite-loader插件并配置webpack，创建SVG图标文件夹结构，编写SvgIcon组件，最终达到便捷管理和使用的SVG图标。

封装SVG格式的图片，vue分装成组件步骤如下

1.安装 svg-sprite-loader 插件，运行以下命令：

  npm i svg-sprite-loader -D

2. webpack4.0版本中的配置：在vue.config.js chainWebpack添加配置

 chainWebpack: (config) => {
        config.resolve.alias
            .set('@', resolve('./src'))
            .set('components', resolve('./src/components'))
        //set第一个参数：设置的别名，第二个参数：设置的路径
        // set svg-sprite-loader
        config.module
            .rule('svg')
            .exclude.add(resolve('src/assets/icons'))
            .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.在 src/assets 目录新建一个 icons 文件夹，里面放三个内容：1)、存放 .svg 文件的 svg文件夹 ； 2)、全局注册组件的 index.js 文件；3)、svgo.yml 文件。

src/assets/icons/index.js --index.js文件

//index.js文件

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

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

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

src/assets/icons/svgo.yml --svgo.yml文件

# replace default config

# multipass: true
# full: true

plugins:

  # - name
  #
  # or:
  # - name: false
  # - name: true
  #
  # or:
  # - name:
  #     param1: 1
  #     param2: 2

- removeAttrs:
    attrs:
      - 'fill'
      - 'fill-rule'

测试的svg文件 share.svg（svg文件可以去iconfont上面查找，复制你要的svg格式的代码）

<svg t="1610951706747" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2532" width="200" height="200"><path d="M896 469.333333l-298.666667-298.666667 0 170.666667C298.666667 384 170.666667 597.333333 128 810.666667c106.666667-149.333333 256-217.6 469.333333-217.6L597.333333 768 896 469.333333z"></path></svg>

4.新建SvgIcon组件

目录：src/components/SvgIcon/index.vue

<template>
  <svg :class="svgClass" aria-hidden="true">
    <use :xlink:href="iconName"/>
  </svg>
</template>

<script>
export default {
  name: 'SvgIcon',
  props: {
    iconClass: {
      type: String,
      required: true
    },
    className: {
      type: String,
      default: ''
    }
  },
  computed: {
    iconName() {
      return `#icon-${this.iconClass}`
    },
    svgClass() {
      if (this.className) {
        return 'svg-icon ' + this.className
      } else {
        return 'svg-icon'
      }
    }
  }
}
</script>

<style scoped>
.svg-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>

5.全局注册svgIcon组件