在 Vue 项目中如何使用 svg?

vue 项目中我们可以使用 svg 来导入图标。以后台管理系统为例。

涉及相关文件及目录

  • 静态资源文件夹下的 icons/svg 用来存放 svg 图标;
  • 静态资源文件夹下的 icons/index.js 用来全局导入组件及实现自动导入所有图标;
  • vue.config.js 文件中配置 loader

使用步骤

1. 安装 svg-sprite-loader

2. 配置 loadersvg 图标存放目录

vue.config.js 文件我们做如下配置:

js 复制代码
const path = require("path");

function resolve(dir) {
  return path.join(__dirname, dir);
}

module.exports = {
  chainWebpack(config) {
    // 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. 自动导入所有图标

  • icons/index.js 中编写自动导入的逻辑代码;
js 复制代码
// icons/index.js
const req = require.context('./svg', false, /\.svg$/)
const requireAll = requireContext => requireContext.keys().map(requireContext)
requireAll(req)
  • main.js 中引入;
js 复制代码
// main.js
import "./assets/icons/index";

4. 创建使用 svg 图标的公共组件

将使用 svg 图标的代码封装成一个公共的组件。

src/components 下创建 SvgIcon 目录

html 复制代码
<!-- SvgIcon/index.vue -->
<template>
  <svg :class="svgClass" aria-hidden="true" v-on="$listeners">
    <use :xlink:href="iconName" />
  </svg>
</template>
js 复制代码
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'
      }
    }
  }
}

5. 全局注册组件

icons/index.js 中全局注册该组件

js 复制代码
import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon'// svg component

Vue.component('svg-icon', SvgIcon)

6. 使用 svg 图标

当我们需要使用 svg 图标时,可以导入通用的组件 SvgIcon

由于组件是全局注册的,因此可以直接使用:

html 复制代码
<svg-icon icon-class="user"></svg-icon>

icon-class 属性的值为 svg 文件夹下图标文件的名称。

相关推荐
y先森1 小时前
CSS3中的伸缩盒模型(弹性盒子、弹性布局)之伸缩容器、伸缩项目、主轴方向、主轴换行方式、复合属性flex-flow
前端·css·css3
前端Hardy1 小时前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu10830189111 小时前
vue3中父div设置display flex,2个子div重叠
前端·javascript·vue.js
IT女孩儿2 小时前
CSS查缺补漏(补充上一条)
前端·css
吃杠碰小鸡3 小时前
commitlint校验git提交信息
前端
虾球xz3 小时前
游戏引擎学习第20天
前端·学习·游戏引擎
我爱李星璇3 小时前
HTML常用表格与标签
前端·html
疯狂的沙粒4 小时前
如何在Vue项目中应用TypeScript?应该注意那些点?
前端·vue.js·typescript
小镇程序员4 小时前
vue2 src_Todolist全局总线事件版本
前端·javascript·vue.js
野槐4 小时前
前端图像处理(一)
前端