如何在使用Vue3项目中引入SVG图标

Vue3项目中怎么引入 SVG 图标？下面本篇文章给大家介绍一下在Vue3项目中引入iconfont图标的方法，希望对大家有所帮助！

首先我们来借助一下外链的图标库（这里使用的是阿里巴巴图标库）进入页面，找到?资源管理?下面的?我的项目，并创建项目

进入页面，找到?资源管理?下面的?我的项目，并创建项目设置如下：

创建好项目后，我们进入到?阿里的 素材库 里面找一些后续需要的图标，添加到?购物车?中，将?购物车?里面的图标添加到项目中

之前会有在线的图标链接地址，让我们进行引入即可。但是现在没找到，应该是得下载到本地 然后进行使用。那我们只能将项目里的图标，选择?Symbol?并?下载至本地。

将其放到 src\assets\svg 目录下进行解压，删除不必要的东西，只留下 iconfont.js 文件即可之后在 main.ts 中进行全局导入。

然后我们在项目中引入一下代码：

import './assets/svg/iconfont.js'

在?src?目录下，创建一个用于存放插件的目录?plugin

// index.vue

 

<template>

  <svg :class="svgClass" aria-hidden="true">

    <use :xlink:href="iconClassName" :fill="color" />

  </svg>

</template>

 

<script setup>

import { computed } from 'vue'

const props = defineProps({

  iconName: {

    type: String,

    required: true

  },

  className: {

    type: String,

    default: ''

  },

  color: {

    type: String,

    default: '#409eff'

  }

})

// 图标在 iconfont 中的名字

const iconClassName = computed(() => {

  return `#${props.iconName}`

})

// 给图标添加上类名

const svgClass = computed(() => {

  if (props.className) {

    return `svg-icon ${props.className}`

  }

  return 'svg-icon'

})

</script>

 

<style scoped>

.svg-icon {

  width: 1em;

  height: 1em;

  position: relative;

  fill: currentColor;

  vertical-align: -2px;

}

</style>

// index.ts

import { App } from 'vue'

import SvgIcon from './index.vue'

export function setupSvgIcon(app: App) {

  app.component('SvgIcon', SvgIcon)

}

之后在?main.ts?中进行注册组件

import { setupSvgIcon } from './plugin/SvgIcon/index'

setupSvgIcon(app)

在 页面中进行使用

<template>

  <div> 图标测试 </div>

  <svg-icon iconName="icon-bianjishuru" />

</template>