跳到内容跳到内容
🚀 影响 Joy UI 2025 年路线图！参与最新的开发者调查

SvgIconAPI

React SvgIcon 组件的 API 参考文档。了解此导出的模块的 props、CSS 和其他 API。

演示

导入

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

阅读本指南，了解有关最小化包大小的差异。

Props

原生组件的 Props 也可用。

名称类型默认值描述
childrennode-

传递到 SVG 元素的节点。

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

组件的颜色。它支持对此组件有意义的那些主题颜色。您可以使用 htmlColor prop 将 color 属性应用于 SVG 元素。

要了解如何添加您自己的颜色，请查看主题组件—扩展颜色。

componentelementType-

用于根节点的组件。可以使用字符串来使用 HTML 元素或组件。

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

应用于图标的主题 fontSize 将覆盖 size prop。当您想使用主题中的特定 font-size 时，请使用此 prop。

htmlColorstring-

将 color 属性应用于 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，允许定义系统 overrides 以及其他 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"，则应用于根元素的类名。

您可以使用以下自定义选项之一覆盖组件的样式

源代码

如果您在此页面中找不到信息，请考虑查看组件的实现以获取更多详细信息。