Vue3項(xiàng)目中怎么引入 SVG 圖標(biāo)？下面本篇文章給大家介紹一下在Vue3項(xiàng)目中引入iconfont圖標(biāo)的方法，希望對(duì)大家有所幫助！
引言
通過(guò)之前一段時(shí)間 Express 和 Mysql 的學(xué)習(xí)
這里嘗試來(lái)搭建一個(gè) 后臺(tái)系統(tǒng) 來(lái)鞏固下學(xué)習(xí)的技術(shù)。
SVG 圖標(biāo)
既然是頁(yè)面，肯定離不開(kāi)一些圖標(biāo) icon ，所以肯定要去最全的 阿里圖標(biāo)庫(kù) 來(lái)尋找
這里講解下如何將 阿里圖標(biāo)庫(kù) 里面的東西，放到我們的頁(yè)面上
阿里圖標(biāo)庫(kù)
進(jìn)入頁(yè)面，找到 資源管理 下面的 我的項(xiàng)目，并創(chuàng)建項(xiàng)目
設(shè)置如下
創(chuàng)建好項(xiàng)目后，我們進(jìn)入到 阿里的 素材庫(kù) 里面找一些后續(xù)需要的圖標(biāo)，
并添加到 購(gòu)物車 中，
將 購(gòu)物車 里面的圖標(biāo)添加到項(xiàng)目中
之前會(huì)有在線的圖標(biāo)鏈接地址，讓我們進(jìn)行引入即可。
但是現(xiàn)在沒(méi)找到，應(yīng)該是得下載到本地 然后進(jìn)行使用= =
那我們只能將項(xiàng)目里的圖標(biāo)，選擇 Symbol 并 下載至本地
將其放到 src\assets\svg 目錄下
進(jìn)行解壓，刪除不必要的東西，只留下 iconfont.js 文件即可
之后在 main.ts 中進(jìn)行全局導(dǎo)入
import './assets/svg/iconfont.js'
項(xiàng)目中引入 svg-icon
在 src 目錄下，創(chuàng)建一個(gè)用于存放插件的目錄 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'
}
})
// 圖標(biāo)在 iconfont 中的名字
const iconClassName = computed(() => {
return `#${props.iconName}`
})
// 給圖標(biāo)添加上類名
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 中進(jìn)行注冊(cè)組件
import { setupSvgIcon } from './plugin/SvgIcon/index'
setupSvgIcon(app)在 頁(yè)面中進(jìn)行使用
<template> <div> 工作臺(tái)頁(yè)面 </div> <svg-icon iconName="icon-bianjishuru" /> </template>
可以看到 SVG 圖標(biāo)成功展示
總結(jié)
通過(guò) Express-Mysql-Vue3-TS-Pinia 做出一個(gè) 后臺(tái)系統(tǒng) 項(xiàng)目
引入 阿里的 SVG 圖標(biāo)到項(xiàng)目中。
