一文詳解Vue3專案中怎麼引入 SVG 圖標

Vue3專案中怎麼引入 SVG 圖示？以下這篇文章為大家介紹一下在Vue3專案中引入iconfont圖示的方法，希望對大家有幫助！

引言

透過之前一段時間Express 和Mysql# 的學習

這裡嘗試來建立一個後台系統 來鞏固下學習的技術。

SVG 圖標

既然是頁面，肯定離不開一些圖標icon ，所以肯定要去最全的阿里圖標庫 來尋找

這裡講解下如何將阿里圖標庫 裡面的東西，放到我們的頁面上

阿里圖標庫

進入頁面，找到資源管理 下面的我的專案，並建立專案

#設定如下

創建好專案後，我們進入到阿里的 素材庫 裡面找一些後續需要的圖標，

並添加到購物車 中，

將購物車 裡面的圖示加入到專案中

##之前會有線上的圖示連結地址，讓我們進行引入即可。

但是現在沒找到，應該是得下載到本地然後進行使用= =

那我們只能將項目裡的圖標，選擇

Symbol 並下載至本機

將其放到

src\assets\svg 目錄下

進行解壓縮，刪除不必要的東西，只留下

iconfont.js 檔案即可

#之後在

main.ts 中進行全域導入

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

專案中引入svg-icon

在

src 目錄下，建立一個用於存放外掛程式的目錄plugin

#

// index.vue

<template>
  <svg>
    <use></use>
  </svg>
</template>

<script>
import { computed } from &#39;vue&#39;
const props = defineProps({
  iconName: {
    type: String,
    required: true
  },
  className: {
    type: String,
    default: &#39;&#39;
  },
  color: {
    type: String,
    default: &#39;#409eff&#39;
  }
})
// 图标在 iconfont 中的名字
const iconClassName = computed(() => {
  return `#${props.iconName}`
})
// 给图标添加上类名
const svgClass = computed(() => {
  if (props.className) {
    return `svg-icon ${props.className}`
  }
  return &#39;svg-icon&#39;
})
</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中文網其他相關文章！