Vue3專案中怎麼引入 SVG 圖示？以下這篇文章為大家介紹一下在Vue3專案中引入iconfont圖示的方法，希望對大家有幫助！
透過之前一段時間Express 和Mysql# 的學習
這裡嘗試來建立一個後台系統 來鞏固下學習的技術。
既然是頁面，肯定離不開一些圖標icon ，所以肯定要去最全的阿里圖標庫 來尋找
這裡講解下如何將阿里圖標庫 裡面的東西，放到我們的頁面上
進入頁面，找到資源管理 下面的我的專案，並建立專案
#設定如下
創建好專案後，我們進入到阿里的 素材庫 裡面找一些後續需要的圖標，
並添加到購物車 中，
將購物車 裡面的圖示加入到專案中
Symbol 並下載至本機
src\assets\svg 目錄下
進行解壓縮，刪除不必要的東西，只留下iconfont.js 檔案即可
main.ts 中進行全域導入
import './assets/svg/iconfont.js'
src 目錄下，建立一個用於存放外掛程式的目錄plugin
// index.vue
<template>
<svg>
<use></use>
</svg>
</template>
<script>
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>
.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></svg-icon> </template>
SVG 圖示成功展示
Express-Mysql-Vue3-TS-Pinia 做出一個後台系統 專案
引入阿里的SVG 圖示到專案中。
【相關推薦：vuejs入門教學】
以上是一文詳解Vue3專案中怎麼引入 SVG 圖標的詳細內容。更多資訊請關注PHP中文網其他相關文章！
