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>
评论前必须登录!
注册