# @iconify/svelte 中文文档规范地址：https://npmcn.com/package/%40iconify/svelte/ 版本：5\.2\.4 npm 元数据更新时间：2026-11-01T07:10:31.157Z 中文译文更新时间：2026-11-01T10:41:16.449Z 软件包许可：MIT 本文由上游 README 机器翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。原始 npm 页面：https://www.npmjs.com/package/%40iconify/svelte 原文对照：https://npmcn.com/package/%40iconify/svelte/?lang=original 项目主页：https://github.com/iconify/iconify 源码仓库：https://github.com/iconify/iconify ## 关键信息（来自 npm 元数据） - 包体积（解压后）：216 kB，26 个文件 - 模块格式：ESM + CJS - TypeScript 类型：包内自带 - 运行依赖：1 个 - peer 依赖：svelte \>5\.0\.0 - 首次发布：2020-04-28T19:39:21.903Z - 最新版本发布：2026-11-01T07:10:30.985Z - 已发布版本数：62（近 12 个月 5 个） ## 中文简介为Svelte图标组件。 ## 安装 ```sh npm install @iconify/svelte ``` 也可以使用：`pnpm add @iconify/svelte`、`yarn add @iconify/svelte`、`bun add @iconify/svelte` ## README # 图标为苗条 Iconify for slite还不是另一个图标组件！已经有很多了。使用其他组件可以得到什么： - 有限的图标集。 - 大的包大小，因为所有图标都是捆绑的。 Iconify图标组件不是这样的。组件不包含任何图标数据，它不绑定到任何特定的图标集。相反，所有数据都是按需从公共API中检索的。这意味着: - 一种语法，从150+图标集超过200000图标。 - SVG呈现。许多组件只是简单地呈现图标字体，看起来很难看。Iconify呈现像素完美的SVG。 - 按需加载图标。不需要绑定图标，组件会自动从Iconify API加载图标数据。有关Iconify项目的更多信息，请访问 [https://iconify.design/](https://iconify.design/). 有关详细文件，请访问 [图标化为精简文档](https://iconify.design/docs/icon-components/svelte/). ## 安装如果你正在使用NPM： ```bash npm install --save-dev @iconify/svelte ``` 如果你正在使用Yarn： ```bash yarn add --dev @iconify/svelte ``` ## API用法安装 `@iconify/svelte` 和导入 `Icon` 作为默认导出： ```js import Icon from '@iconify/svelte'; ``` 然后使用带有图标数据的组件作为“icon”参数： ```jsx ``` 组件将自动从Iconify API中检索“midi -light:home”的数据并渲染它。Iconify API上有超过20万个图标，来自各种免费和开源的图标集，包括所有最流行的图标集。 ## 离线使用这个图标组件被设计为与Iconify API一起使用，按需加载图标数据，而不是捆绑它。如果你想使用没有Iconify API的图标， [还有很多其他的选择](https://iconify.design/docs/usage/). ## Web组件如果你遇到SSR水合作用的问题，有一个可供选择的解决方案： [Iconify图标web组件](https://iconify.design/docs/iconify-icon/). Web组件优先于此组件，如果： - 您的页面运行缓慢。Web组件在影子DOM中分离图标渲染，提高性能。 - 您正在经历CSS冲突。 ## 图标名称图标名称是一个字符串。一些例子: - `@api-provider:icon-set-prefix:icon-name` - `mdi-light:home` （在本例中，API provider为空，因此跳过它）它有3个部分，用“：”隔开： - 提供者指向API源。以“@”开头，可以为空（空值用于公共Iconify API）。 - 前缀是图标集的名称。 - Name是图标的名称。看到 [Iconify for slite图标名称文档](https://iconify.design/docs/icon-components/svelte/icon-name.html) 有关更详细的解释。 ## 使用图标数据你可以将图标数据传递给组件，而不是图标名称： ```jsx import Icon from '@iconify/svelte'; import home from '@iconify-icons/mdi-light/home'; function renderHomeIcon() { return ; } ``` 看到 [图标包文档](https://iconify.design/docs/icons/) 了解更多详情。 ### ES / CommonJS包上面的例子在某些用例中可能会失败。包 `@iconify-icons/mdi-light` 使用某些软件可能还不支持的ES模块。但是不要担心，有一个简单的解决方案：切换到CommonJS图标包。要切换到CommonJS包，替换上面例子中的这一行： ```js import home from '@iconify-icons/mdi-light/home'; ``` 与 ```js import home from '@iconify/icons-mdi-light/home'; ``` 所有图标都可以作为ES模块用于现代的捆绑器，作为CommonJS模块用于过时的捆绑器。ES模块使用格式 `@iconify-icons/{prefix}`， CommonJS模块使用 `@iconify/icons-{prefix}`. 有关详细信息，请参见 [图标包文档](https://iconify.design/docs/icons/). ## 垂直对齐图标有两种模式：内联模式和块模式。模式之间的差异是 `vertical-align` 它被添加到内联图标中。内联图标的对齐略低于基线，因此与文本相比，它们看起来像字形字体一样居中。块图标没有对齐，像图像一样，默认情况下会对齐到基线。添加了对齐选项，使图标看起来像文本的延续，表现得像字形字体。这将使从字形字体的迁移更容易。要在块模式和内联模式之间切换，可以使用布尔值 `inline` 财产。 ```svelte

Block:

Inline:

``` 显示内联模式和块模式之间区别的可视化示例： ![Inline icon](https://iconify.design/assets/images/inline.png) ## 图标组件属性 `icon` 属性是必选的。它告诉组件渲染哪个图标。如果属性值无效，组件将呈现一个空图标。该值必须是包含图标数据的对象。 icon组件有以下可选属性： - `inline`。更改图标行为以匹配图标字体。请参阅下面的“内联图标”部分。 - `width` 和 `height`。图标尺寸。两者的默认值都是“1em”。参见下面的“尺寸”部分。 - `color`。图标的颜色。这和设定风格的颜色是一样的。请参阅下面的“图标颜色”部分。 - `flip`， `hFlip`， `vFlip`。水平和/或垂直翻转图标。请参阅下面的“转换”部分。 - `rotate`。旋转图标90、180或270度。请参阅下面的“转换”部分。 - `align`， `vAlign`， `hAlign`， `slice`。图标对齐。请参阅下面的“对齐”部分。 - `onLoad`。当图标数据被加载时调用的回调函数。请参阅下面的“onLoad”部分。 ### 其他属性和事件除了上面提到的属性之外，图标组件还接受任何其他属性。所有其他属性都将传递给generate `SVG` 元素，你可以设置内联样式，添加标题等等。在Svelte中，不可能将事件传递给子组件，因此Icon组件不处理任何事件。如果您需要使图标可点击，将其包装在按钮或链接中，并为该按钮或链接分配一个事件。 ### 维默认情况下，图标高度为“1em”。With是动态的，使用图标的宽高比计算。有几种方法可以改变图标的尺寸： - 设置 `font-size` 在风格。 - 设置 `width` 和/或 `height` 属性。值 `width` 和 `height` 可以是数字或字符串。如果你只设置一个维度，另一个维度将使用图标的宽高比计算。例如，如果图标大小为16 × 24，则将高度设置为48，则宽度将设置为32。计算不仅适用于数字，也适用于字符串值。 #### 以数字表示维度你可以用数字来表示 `width` 和 `height`. ```jsx ``` ```jsx ``` 数值被视为像素。这意味着在上面的例子中，值与“24px”和“16px”相同。 #### 维度是没有单位的字符串如果您使用没有单位的字符串，它们将被视为与上面示例中的数字相同。 ```jsx ``` #### 维度作为带单位的字符串你可以在宽度和高度值中使用单位： ```jsx ``` 使用时要小心 `calc`，基于单位或百分比的查看端口。在SVG元素中，它们的行为可能不像您期望的那样，当使用这些单元时，您应该同时考虑宽度和高度的设置。 #### 尺寸为“auto” 关键字“auto”设置图标的尺寸 `viewBox` 维度。例如，对于24 × 24的图标使用 `height="auto"` 设置高度为24像素。 ```jsx ``` ### 图标颜色有两种类型的图标：没有调色板的图标和有调色板的图标。有调色板的图标，比如表情符号，是不能自定义的。为这些图标设置颜色不会改变任何东西。没有调色板的图标可以自定义。默认情况下，颜色设置为“currentColor”，这意味着图标的颜色与文本颜色匹配。要改变颜色，你可以： - 集 `color` 样式或使用样式表来定位图标。如果您正在使用样式表，则目标 `svg` 元素。如果您使用的是作用域样式，请使用 `:global(svg)` 为目标 `svg` 元素。 - 添加 `color` 属性。示例：使用 `color` 属性: ```jsx ``` 使用行内样式： ```jsx ``` 使用样式表: ```jsx ``` ```css .red-icon { color: red; } ``` 使用Svelte作用域样式： ```jsx

``` ### 转换你可以旋转和翻转图标。这似乎是多余的，因为图标也可以使用CSS转换来旋转和翻转。那么为什么要存在转换属性呢？因为这是一种不同类型的变换。 - CSS变换变换整个图标。 - 图标转换转换图标的内容。如果你有一个方形图标，这没有什么区别。然而，如果你有一个图标有不同的宽度和高度值，它会产生巨大的差异。将16 × 24的图标旋转90度会得到： - CSS转换保持16x24的边界框，这可能会导致图标重叠周围的文本。 - 图标转换将边界框更改为24x16，旋转图标内的内容。看到 [图标转换文档](https://iconify.design/docs/icon-components/svelte/transform.html) 了解更多详情。 #### 翻转图标有几个属性可用于翻转图标： - `hFlip`：布尔属性，水平翻转图标。 - `vFlip`：布尔属性，垂直翻转图标。 - `flip`：速记字符串属性，可以水平和/或垂直翻转图标。示例：水平翻转图标： ```jsx ``` 垂直翻转图标： ```jsx ``` 水平和垂直翻转图标（与180度旋转相同）： ```jsx ``` #### 旋转图标一个图标可以旋转90度、180度和270度。只有图标的内容被旋转。要旋转图标，请使用 `rotate` 属性。Value可以是字符串（度或百分比）或数字。数值是1代表90度，2代表180度，3代表270度。 90度旋转的例子： ```jsx ``` ### onLoad `onLoad` 属性是可选的回调函数。它在加载图标数据时被调用。它不是一个事件，比如 `onClick` 事件的链接，它是一个简单的回调函数。当 `onLoad` 被称为: - 如果icon属性的值是一个对象， `onLoad` 未被调用。 - 如果icon属性的值是一个字符串并且图标数据可用， `onLoad` 在第一次渲染时调用。 - 如果图标属性的值是字符串且图标数据不可用， `onLoad` 在从API检索图标数据后第一次重新渲染时调用。目的是什么 `onLoad`？让您知道图标组件何时呈现图标，何时不呈现任何内容。这允许你做一些事情，比如为父元素添加类名，比如“container——with-icon”，在显示图标时修改布局。 ## 工兵图标组件与Sapper一起工作。如果按照上面的示例使用组件，SVG将在服务器上呈现，并作为HTML代码发送给访问者。如果要呈现多个相同的图标，那么在服务器上呈现它们并不是最佳选择。最好在浏览器中使用JavaScript渲染一次。如何做到这一点与这个图标组件？通过异步加载组件和图标数据。例子: ```jsx

{post.title}

``` 中添加了一个图标 `postIcon` 每个列表项。如果在服务器上呈现，HTML会多次发送SVG元素。但是因为它是在浏览器中呈现的，所以图标数据和组件只需要发送一次到浏览器。而不是使用 ``，你必须使用 `` 确保组件是动态呈现的。 ## 完整的文档有关详细文件，请访问 [图标化为精简文档](https://iconify.design/docs/icon-components/svelte/). ## 许可证 Svelte组件是MIT许可发布的。 ©2020-至今Vjacheslav Trushkin 看到 [图标化图标集页面](https://icon-sets.iconify.design/) 查看集合列表及其许可证。 ## 常见问题 ### @iconify/svelte 是什么？为Svelte图标组件。 ### 如何安装 @iconify/svelte？在项目目录运行 npm install @iconify/svelte，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：svelte（\>5\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。 ### @iconify/svelte 支持 TypeScript 吗？支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。 ### @iconify/svelte 支持 ESM 还是 CommonJS？同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。 ### @iconify/svelte 可以商用吗？ @iconify/svelte 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。 ### @iconify/svelte 还在维护吗？最新版本 5\.2\.4 发布于 2026/11/01（2 天前）；至今共发布 62 个版本，其中过去 12 个月发布了 5 个；首次发布于 2020/04/29。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。