在vue2中使用 SVG 图标

原创

于 2023-02-24 14:22:08 发布 · 337 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #前端

本文介绍了如何在 Vue2 项目中使用 SVG 图标。首先，需要安装 svg-sprite-loader 和 svgo 插件。接着，在 components 文件夹创建 svgIcon.vue 组件，并在 src/icons 目录下组织 svg 资源。通过 index.js 导出图标并在 main.js 中全局引入。最后，更新 webpack 配置以支持 SVG 图标的处理。遵循这些步骤，可以从 iconfont 等平台下载 SVG 文件并顺利在项目中使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

安装svg-sprite-loader和svgo插件

yarn add svg-sprite-loader svgo

在components文件夹下面增加svgIcon.vue组件

// svgIcon.vue
<template>
  <svg :class="svgClass" aria-hidden="true" :width="swidth" :height="sheight">
    <use :xlink:href="iconName" />
  </svg>
</template>

<script>
export default {
  name: "SvgIcon",
  props: {
    iconClass: {
      type: String,
      required: true
    },
    className: {
      type: String,
      default: ""
    },
    size: {
      type: [String, Number],
      default: 20
    }
  },
  computed: {
    iconName() {
      return `#icon-${this.iconClass}`;