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

SvgIconAPI

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

示範

匯入

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

請閱讀這份關於最小化套件大小的指南，以瞭解差異。

Props

原生元件的 Props 也可用。

名稱類型預設值描述
childrennode-

傳遞到 SVG 元素的節點。

classesobject-

覆寫或擴充套用至元件的樣式。

請參閱下方CSS 類別 API 以瞭解更多詳細資訊。

color'inherit'
| 'action'
| 'disabled'
| 'primary'
| 'secondary'
| 'error'
| 'info'
| 'success'
| 'warning'
| string		'inherit'

元件的顏色。它同時支援預設和自訂主題顏色，這些顏色可以按照調色盤自訂指南中所示的方式新增。您可以使用 htmlColor prop 將顏色屬性套用到 SVG 元素。

componentelementType-

用於根節點的元件。可以是字串（用於 HTML 元素）或元件。

fontSize'inherit'
| 'large'
| 'medium'
| 'small'
| string		'medium'

套用至圖示的 fontSize。預設為 24px，但可以設定為繼承字型大小。

htmlColorstring-

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

inheritViewBoxboolfalse

如果為 true，則根節點將繼承自訂 component 的 viewBox，並且 viewBox prop 將被忽略。當您想要參考自訂 component 並讓 SvgIcon 將該 component 的 viewBox 傳遞到根節點時，此功能很有用。

shapeRenderingstring-

shape-rendering 屬性。不同選項的行為在 MDN Web Docs 上有描述。如果您在圖示模糊方面遇到問題，您應該研究此 prop。

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

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

CSS 類別

這些類別名稱對於使用 CSS 設定樣式很有用。當觸發特定狀態時，它們會套用至元件的插槽。

類別名稱規則名稱描述
.MuiSvgIcon-colorActioncolorAction如果 color="action"，則套用至根元素的樣式。
.MuiSvgIcon-colorDisabledcolorDisabled如果 color="disabled"，則套用至根元素的樣式。
.MuiSvgIcon-colorErrorcolorError如果 color="error"，則套用至根元素的樣式。
.MuiSvgIcon-colorPrimarycolorPrimary如果 color="primary"，則套用至根元素的樣式。
.MuiSvgIcon-colorSecondarycolorSecondary如果 color="secondary"，則套用至根元素的樣式。
.MuiSvgIcon-fontSizeInheritfontSizeInherit如果 fontSize="inherit"，則套用至根元素的樣式。
.MuiSvgIcon-fontSizeLargefontSizeLarge如果 fontSize="large"，則套用至根元素的樣式。
.MuiSvgIcon-fontSizeMediumfontSizeMedium如果 fontSize="medium"，則套用至根元素的樣式。
.MuiSvgIcon-fontSizeSmallfontSizeSmall如果 fontSize="small"，則套用至根元素的樣式。
.MuiSvgIcon-rootroot套用至根元素的樣式。

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

原始碼

如果您在此頁面中找不到資訊，請考慮查看元件的實作以瞭解更多詳細資訊。