此網站需要開啟JavaScript
JavaScript is required

Icon

全部圖示都是 SVG sprite,顏色一律 currentColor,所以跟著外層文字顏色走。點任一個圖示可直接複製用法。

用法

AtomIcon

components/Atom/Icon.vue

name 對應 assets/icons 底下的檔名。 尺寸與顏色不用 props,直接在外層下 class="size-4" 這類 utility 就好。

新增圖示時記得把 SVG 內的顏色改成 currentColor,否則外層改不動顏色。

尺寸與顏色

Props

名稱型別預設值說明
name*String—對應 assets/icons 的檔名,不含副檔名
isFullBooleanfalse撐滿外層容器

* 為必填

全部圖示(47)

清單直接掃 assets/icons 產生, 新增檔案後這裡會自動出現,不需要另外維護名單。

方向 (10)

通用 (21)

社群 (16)