前言 React是前端開發領域中最受歡迎的JavaScript庫之一，但有時候在編寫React應用程式時，可能陷入一些不佳的習慣和錯誤做法。這些不佳的習慣可能導致性能下降、代碼難以維護，以及其他問題。在本文中，我們將探討日常工作中應該避免的9個壞React習慣，並提供相關示例代碼來說明這些問題以及如 ...
1. 字體圖標與矢量圖標
目前主要有兩種圖標類型：字體圖標和矢量圖標。
字體圖標是在網頁打開時，下載一整個圖標庫，通常可以通過特定標簽例如 <i> 來使用，優點是方便地實現文字混排，缺點是包體積大，且難以自定義。
矢量圖標本質是 <svg> 標簽，包中只含有所需的圖標，且很容易自定義，也可以選用不同圖標庫來源的圖標，甚至可以用自定義 SVG，缺點是與文字混排相對複雜。
本文推薦並主要使用矢量圖標。
2. 矢量圖標源
目前比較全面的圖標集：
-
Google Material Symbols (之前的 Google Icon)：比較現代化的圖標集，包括圓角尖角圖標集、 空心實心圖標集，主打交互圖標，沒有商標。
-
Material Design Icons：Material 風格的另一個圖標集，大而全。
-
Iconfont：阿裡的圖標庫，包括很多帶顏色的特殊圖標
-
Iconify：一個各種圖標集的收集站，我們後文使用的包可以使用其中的所有圖標集。
以上基本可以滿足任何使用要求了。
3. 安裝圖標包及其剪枝策略
為了在 Vue 中便捷地使用圖標，可以使用 iconify-prerendered 庫，包含了所有 iconify 中圖標集的圖標的組件：
# 安裝 Material Symbols 包
npm i @iconify-prerendered/vue-material-symbols
# 安裝 Material Design Icons 包
npm i @iconify-prerendered/vue-mdi
當需要引入時，可以使用：
<script setup lang="ts">
import { IconWarningRounded } from '@iconify-prerendered/vue-material-symbols';
</script>
<template>
<IconWarningRounded />
</template>
@iconify-prerendered/vue-material-symbols 的圖標一般命名格式為：
Icon + 圖標名 + 可選: Outline (空心) + 可選: Rounded (圓角)
同時，這裡我們需要引入各個所需的圖標，而不能使用通配符：
# 不能這樣
import * from '@iconify-prerendered/vue-mdi';
這是因為我們的代碼需要剪枝友好。剪枝是一種代碼編譯策略，畢竟不可能將包中所有的圖標都發往客戶端瀏覽器，所以編譯為 js 包時，只會包含已經被 import 的圖標，因此最大程度地減少了包體積。
註意：當 vite 運行在 dev 模式時，iconify-prerendered 會將整個圖標包 (10M) 發送到瀏覽器，而不會剪枝，因此首次載入會很慢，請耐心等待。build 後會自動剪枝，不會再出現這種情況。
4. 圖標與文字混排
由於我們使用的圖標包本質上會將圖標以 <svg> 標簽的形式渲染，因此需要考慮混排的問題，一般用 flex 容器先包含兩個元素，然後在 icon 上使用 my-auto 以實現：
<script setup lang="ts">
import { IconWarningRounded } from '@iconify-prerendered/vue-material-symbols';
</script>
<template>
<div class="flex text-red-700 gap-2">
<IconWarningRounded class="my-auto w-6 h-6" />
<p class="text-lg font-semibold">Error!</p>
</div>
</template>
5. 自定義 SVG 圖標
自定義 SVG 圖標一般需要關註：viewBox（代表定義的畫布範圍）、fill（顏色）兩個屬性：
<template>
<svg viewBox="0 0 16 16" fill="currentColor">
<path
d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"
/>
</svg>
</template>
這個 SVG 可以由 Adobe Illustrator 生成 (另存為 SVG)，略微修改即可做成 Vue 組件使用。
如果需要修改圖標顏色，可以直接設置 color 屬性：
<script setup lang="ts">
import { IconWarningRounded } from '@iconify-prerendered/vue-material-symbols';
</script>
<template>
<IconWarningRounded class="text-red-500" />
</template>
如果需要分別設定各個路徑，可以直接在 <path> 上進行修改，例如使用 fill 屬性修改填充顏色：
<template>
<svg viewBox="0 0 16 16">
<path class="fill-slate-400 hover:fill-slate-300 transition-colors duration-300"
d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"
/>
<path class="fill-red-400 hover:fill-yellow-300 transition-colors duration-300"
d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"
/>
</svg>
</template>
6. 案例分析
上述方式已經使用在開源項目 GithubStar.Pro 中，你可以進入網站體驗。該項目的源碼在：Github，提供了一個 Vue 3.0 + Tailwind CSS + Iconify-Prerendered 的使用案例。
也歡迎各位使用 GithubStar.Pro 互贊平臺，提高您的開源項目知名度，收穫更多用戶。
