跳到主要內容跳到主要內容
🚀 影響 Joy UI 的 2025 年開發藍圖！參與最新的開發者問卷調查

SvgIconAPI

React SvgIcon 組件的 API 參考文件。了解此匯出模組的 props、CSS 和其他 API。

範例

匯入

import SvgIcon from '@mui/joy/SvgIcon';
// or
import { SvgIcon } from '@mui/joy';

若要了解差異，請閱讀此關於最小化 bundle 大小的指南。

Props

也提供原生組件的 Props。

名稱類型預設描述
childrennode-

傳遞到 SVG 元素的節點。

color'danger'
| 'inherit'
| 'neutral'
| 'primary'
| 'success'
| 'warning'
| string		-

組件的顏色。它支援適用於此組件的那些主題顏色。您可以使用 htmlColor prop 將顏色屬性套用到 SVG 元素。

若要了解如何新增自己的顏色，請查看主題組件 — 擴充顏色。

componentelementType-

用於根節點的組件。字串以使用 HTML 元素或組件。

fontSize'inherit'
| 'lg'
| 'md'
| 'sm'
| 'xl'
| 'xl2'
| 'xl3'
| 'xl4'
| 'xs'
| string		-

套用至圖示的主題 fontSize，將覆寫 size prop。當您想要使用來自主題的特定字型大小時，請使用此 prop。

htmlColorstring-

將顏色屬性套用到 SVG 元素。

inheritViewBoxboolfalse

若為 true，根節點會繼承自訂 component 的 viewBox，且 viewBox prop 將會被忽略。當您想要參考自訂 component 並讓 SvgIcon 將該 component 的 viewBox 傳遞至根節點時，這會很有用。

shapeRenderingstring-

shape-rendering 屬性。不同選項的行為在 MDN Web Docs 上說明。如果您遇到圖示模糊的問題，您應該調查此 prop。

size'sm'
| 'md'
| 'lg'
| string		'md'

組件的大小。

若要了解如何將自訂大小新增至組件，請查看主題組件 — 擴充大小。

slotProps{ root?: func
| object }		{}

用於每個 slot 內部的 props。

slots{ root?: elementType }{}

用於每個 slot 內部的組件。

請參閱下方的Slots API 以取得更多詳細資訊。

sxArray<func
| object
| bool>
| func
| object		-

系統 prop，允許定義系統覆寫以及其他 CSS 樣式。

請參閱 `sx` 頁面 以取得更多詳細資訊。

titleAccessstring-

為包含元素的元素提供人類可讀的標題。https://www.w3.org/TR/SVG-access/#Equivalent

viewBoxstring'0 0 24 24'

允許您重新定義 SVG 元素內不含單位的座標的意義。例如，如果 SVG 元素為 500 (寬度) x 200 (高度)，且您傳遞 viewBox="0 0 50 20"，這表示 SVG 內的座標將從左上角 (0,0) 到右下角 (50,20)，且每個單位將值 10px。

ref 轉發到根元素。

主題預設 props

您可以使用 JoySvgIcon 透過主題變更此組件的預設 props。

Slots

若要了解如何自訂 slot，請查看覆寫組件結構指南。

Slot 名稱類別名稱預設組件描述
root.MuiSvgIcon-root'svg'轉譯根的組件。

CSS 類別

這些類別名稱適用於使用 CSS 設定樣式。當觸發特定狀態時，它們會套用至組件的 slots。

類別名稱規則名稱描述
.MuiSvgIcon-colorDangercolorDanger如果 color="danger"，則套用至根元素的類別名稱。
.MuiSvgIcon-colorInheritcolorInherit如果 color="inherit"，則套用至根元素的類別名稱。
.MuiSvgIcon-colorNeutralcolorNeutral如果 color="neutral"，則套用至根元素的類別名稱。
.MuiSvgIcon-colorPrimarycolorPrimary如果 color="primary"，則套用至根元素的類別名稱。
.MuiSvgIcon-colorSuccesscolorSuccess如果 color="success"，則套用至根元素的類別名稱。
.MuiSvgIcon-colorWarningcolorWarning如果 color="warning"，則套用至根元素的類別名稱。
.MuiSvgIcon-fontSizeInheritfontSizeInherit如果 fontSize="inherit"，則套用至根元素的類別名稱。
.MuiSvgIcon-fontSizeLgfontSizeLg如果 fontSize="lg"，則套用至根元素的類別名稱。
.MuiSvgIcon-fontSizeMdfontSizeMd如果 fontSize="md"，則套用至根元素的類別名稱。
.MuiSvgIcon-fontSizeSmfontSizeSm如果 fontSize="sm"，則套用至根元素的類別名稱。
.MuiSvgIcon-fontSizeXlfontSizeXl如果 fontSize="xl"，則套用至根元素的類別名稱。
.MuiSvgIcon-fontSizeXl2fontSizeXl2如果 fontSize="xl2"，則套用至根元素的類別名稱。
.MuiSvgIcon-fontSizeXl3fontSizeXl3如果 fontSize="xl3"，則套用至根元素的類別名稱。
.MuiSvgIcon-fontSizeXl4fontSizeXl4如果 fontSize="xl4"，則套用至根元素的類別名稱。
.MuiSvgIcon-fontSizeXsfontSizeXs如果 fontSize="xs"，則套用至根元素的類別名稱。
.MuiSvgIcon-sizeLgsizeLg如果 size="lg"，則套用至根元素的類別名稱。
.MuiSvgIcon-sizeMdsizeMd如果 size="md"，則套用至根元素的類別名稱。
.MuiSvgIcon-sizeSmsizeSm如果 size="sm"，則套用至根元素的類別名稱。

您可以使用下列自訂選項之一覆寫組件的樣式

原始碼

如果您未在此頁面中找到資訊，請考慮查看組件的實作以取得更多詳細資訊。