使用

<s-icon icon="icon-file"/>

準備圖標

這里使用的icon均自于https://www.iconfont.cn/，它是支持unicode、font class和symbol三種形式的，第一種比較麻煩，于是我選用了以下兩種情況，使用其中一種即可：

• Font class
• Symbol（推薦）

---

選擇好icon后，注意命名，上面的是自己自定義的名，下面的是使用時用的名稱：

將代碼粘貼進某一個目錄中：

接著在入口文件進行導入（補充一下，這里的@/會解析為src/，如果沒有配置，直接寫src/即可）

---

錄制了一個gif可以參考一下：

封裝

<template><!--font-icon寫法--><i :class="[props.icon, 'iconfont']" v-if="type==='font-class'"></i><!--symbol寫法--><svg class="icon" aria-hidden="true" v-else><use :xlink:href="`#${props.icon}`"></use></svg> </template><script lang="ts" setup> const props = defineProps({icon: {type: String,required: true},type: {type: String,default: "font-class"} }) </script><style lang="less" scoped> i {margin-right: 4px;vertical-align: middle; }.icon {width: 1em; height: 1em;vertical-align: -0.15em;fill: currentColor;overflow: hidden;} </style>

總結

以上是生活随笔為你收集整理的【vue3组件封装】Icon图标组件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。