图标为苗条

Iconify for slite还不是另一个图标组件！已经有很多了。

使用其他组件可以得到什么：

有限的图标集。
大的包大小，因为所有图标都是捆绑的。

Iconify图标组件不是这样的。组件不包含任何图标数据，它不绑定到任何特定的图标集。相反，所有数据都是按需从公共API中检索的。

这意味着:

一种语法，从150+图标集超过200000图标。
SVG呈现。许多组件只是简单地呈现图标字体，看起来很难看。Iconify呈现像素完美的SVG。
按需加载图标。不需要绑定图标，组件会自动从Iconify API加载图标数据。

有关Iconify项目的更多信息，请访问 https://iconify.design/.

有关详细文件，请访问图标化为精简文档.

安装

如果你正在使用NPM：

npm install --save-dev @iconify/svelte

如果你正在使用Yarn：

yarn add --dev @iconify/svelte

API用法

安装 @iconify/svelte 和导入 Icon 作为默认导出：

import Icon from '@iconify/svelte';

然后使用带有图标数据的组件作为“icon”参数：

<Icon icon="mdi-light:home" />

组件将自动从Iconify API中检索“midi -light:home”的数据并渲染它。Iconify API上有超过20万个图标，来自各种免费和开源的图标集，包括所有最流行的图标集。

离线使用

这个图标组件被设计为与Iconify API一起使用，按需加载图标数据，而不是捆绑它。

如果你想使用没有Iconify API的图标，还有很多其他的选择.

Web组件

如果你遇到SSR水合作用的问题，有一个可供选择的解决方案： Iconify图标web组件.

Web组件优先于此组件，如果：

您的页面运行缓慢。Web组件在影子DOM中分离图标渲染，提高性能。
您正在经历CSS冲突。

图标名称

图标名称是一个字符串。一些例子:

@api-provider:icon-set-prefix:icon-name
mdi-light:home （在本例中，API provider为空，因此跳过它）

它有3个部分，用“：”隔开：

提供者指向API源。以“@”开头，可以为空（空值用于公共Iconify API）。
前缀是图标集的名称。
Name是图标的名称。

看到 Iconify for slite图标名称文档有关更详细的解释。

使用图标数据

你可以将图标数据传递给组件，而不是图标名称：

import Icon from '@iconify/svelte';
import home from '@iconify-icons/mdi-light/home';

function renderHomeIcon() {
    return <Icon icon={home} />;
}

看到图标包文档了解更多详情。

ES / CommonJS包

上面的例子在某些用例中可能会失败。包 @iconify-icons/mdi-light 使用某些软件可能还不支持的ES模块。但是不要担心，有一个简单的解决方案：切换到CommonJS图标包。

要切换到CommonJS包，替换上面例子中的这一行：

import home from '@iconify-icons/mdi-light/home';

与

import home from '@iconify/icons-mdi-light/home';

所有图标都可以作为ES模块用于现代的捆绑器，作为CommonJS模块用于过时的捆绑器。ES模块使用格式 @iconify-icons/{prefix}， CommonJS模块使用 @iconify/icons-{prefix}.

有关详细信息，请参见图标包文档.

垂直对齐

图标有两种模式：内联模式和块模式。模式之间的差异是 vertical-align 它被添加到内联图标中。

内联图标的对齐略低于基线，因此与文本相比，它们看起来像字形字体一样居中。

块图标没有对齐，像图像一样，默认情况下会对齐到基线。

添加了对齐选项，使图标看起来像文本的延续，表现得像字形字体。这将使从字形字体的迁移更容易。

要在块模式和内联模式之间切换，可以使用布尔值 inline 财产。

<script>
    import Icon from '@iconify/svelte';
</script>

<p>
    Block:
    <Icon icon="line-md:image-twotone" />
    <Icon icon="mdi:account-box-outline" />
</p>
<p>
    Inline:
    <Icon icon="line-md:image-twotone" inline={true} />
    <Icon icon="mdi:account-box-outline" inline={true} />
</p>

显示内联模式和块模式之间区别的可视化示例：

Inline icon

图标组件属性

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.

<Icon icon={homeIcon} height={24} />

<Icon icon="mdi-light:home" width={16} height={16} />

数值被视为像素。这意味着在上面的例子中，值与“24px”和“16px”相同。

维度是没有单位的字符串

如果您使用没有单位的字符串，它们将被视为与上面示例中的数字相同。

<Icon icon="mdi-light:home" height="24" />

维度作为带单位的字符串

你可以在宽度和高度值中使用单位：

<Icon icon="mdi-light:home" height="2em" />

使用时要小心 calc，基于单位或百分比的查看端口。在SVG元素中，它们的行为可能不像您期望的那样，当使用这些单元时，您应该同时考虑宽度和高度的设置。

尺寸为“auto”

关键字“auto”设置图标的尺寸 viewBox 维度。例如，对于24 × 24的图标使用 height="auto" 设置高度为24像素。

<Icon icon="mdi-light:home" height="auto" />

图标颜色

有两种类型的图标：没有调色板的图标和有调色板的图标。

有调色板的图标，比如表情符号，是不能自定义的。为这些图标设置颜色不会改变任何东西。

没有调色板的图标可以自定义。默认情况下，颜色设置为“currentColor”，这意味着图标的颜色与文本颜色匹配。要改变颜色，你可以：

集 color 样式或使用样式表来定位图标。如果您正在使用样式表，则目标 svg 元素。如果您使用的是作用域样式，请使用 :global(svg) 为目标 svg 元素。
添加 color 属性。

示例：

使用 color 属性:

<Icon icon="eva:alert-triangle-fill" color="red" />
<Icon icon="eva:alert-triangle-fill" color="#f00" />

使用行内样式：

<Icon icon="eva:alert-triangle-fill" style="color: red;" />
<Icon icon="eva:alert-triangle-fill" style="color: #f00;" />

使用样式表:

<Icon icon="eva:alert-triangle-fill" class="red-icon" />

.red-icon {
    color: red;
}

使用Svelte作用域样式：

<script>
import Icon from '@iconify/svelte';
import alertIcon from '@iconify-icons/mdi/alert';
</script>

<style>
    div :global(.red-icon) {
        color: red;
    }
</style>

<div>
    <Icon icon={alertIcon} class="red-icon" />
</div>

转换

你可以旋转和翻转图标。

这似乎是多余的，因为图标也可以使用CSS转换来旋转和翻转。那么为什么要存在转换属性呢？因为这是一种不同类型的变换。

CSS变换变换整个图标。
图标转换转换图标的内容。

如果你有一个方形图标，这没有什么区别。然而，如果你有一个图标有不同的宽度和高度值，它会产生巨大的差异。

将16 × 24的图标旋转90度会得到：

CSS转换保持16x24的边界框，这可能会导致图标重叠周围的文本。
图标转换将边界框更改为24x16，旋转图标内的内容。

看到图标转换文档了解更多详情。

翻转图标

有几个属性可用于翻转图标：

hFlip：布尔属性，水平翻转图标。
vFlip：布尔属性，垂直翻转图标。
flip：速记字符串属性，可以水平和/或垂直翻转图标。

示例：

水平翻转图标：

<Icon icon="eva:alert-triangle-fill" hFlip={true} />
<Icon icon="eva:alert-triangle-fill" flip="horizontal" />

垂直翻转图标：

<Icon icon="eva:alert-triangle-fill" vFlip={true} />
<Icon icon="eva:alert-triangle-fill" flip="vertical" />

水平和垂直翻转图标（与180度旋转相同）：

<Icon icon="eva:alert-triangle-fill" hFlip={true} vFlip={true} />
<Icon icon="eva:alert-triangle-fill" flip="horizontal,vertical" />

旋转图标

一个图标可以旋转90度、180度和270度。只有图标的内容被旋转。

要旋转图标，请使用 rotate 属性。Value可以是字符串（度或百分比）或数字。

数值是1代表90度，2代表180度，3代表270度。

90度旋转的例子：

<Icon icon="eva:alert-triangle-fill" rotate={1} />
<Icon icon="eva:alert-triangle-fill" rotate="90deg" />
<Icon icon="eva:alert-triangle-fill" rotate="25%" />

onLoad

onLoad 属性是可选的回调函数。它在加载图标数据时被调用。

它不是一个事件，比如 onClick 事件的链接，它是一个简单的回调函数。

当 onLoad 被称为:

如果icon属性的值是一个对象， onLoad 未被调用。
如果icon属性的值是一个字符串并且图标数据可用， onLoad 在第一次渲染时调用。
如果图标属性的值是字符串且图标数据不可用， onLoad 在从API检索图标数据后第一次重新渲染时调用。

目的是什么 onLoad？让您知道图标组件何时呈现图标，何时不呈现任何内容。这允许你做一些事情，比如为父元素添加类名，比如“container——with-icon”，在显示图标时修改布局。

工兵

图标组件与Sapper一起工作。

如果按照上面的示例使用组件，SVG将在服务器上呈现，并作为HTML代码发送给访问者。

如果要呈现多个相同的图标，那么在服务器上呈现它们并不是最佳选择。最好在浏览器中使用JavaScript渲染一次。如何做到这一点与这个图标组件？通过异步加载组件和图标数据。

例子:

<script>
    // Dynamically load icon component, icon data and render it on client side
    import { onMount } from 'svelte';

    let Icon;
    let postIcon;

    onMount(async () => {
        const promises = [
            import('@iconify/svelte'), // Component
            import('@iconify-icons/bi/link-45deg'), // Icon #1
        ];
        const results = await Promise.all(promises);
        Icon = results[0].default; // Component
        postIcon = results[1].default; // Icon #1
    });

    export let posts;
</script>

<ul>
    {#each posts as post}
        <li>
            <svelte:component this={Icon} icon={postIcon} />
            <a rel="prefetch" href="blog/{post.slug}">{post.title}</a>
        </li>
    {/each}
</ul>

中添加了一个图标 postIcon 每个列表项。如果在服务器上呈现，HTML会多次发送SVG元素。但是因为它是在浏览器中呈现的，所以图标数据和组件只需要发送一次到浏览器。

而不是使用 <Icon />，你必须使用 <svelte:component /> 确保组件是动态呈现的。

完整的文档

有关详细文件，请访问图标化为精简文档.

许可证

Svelte组件是MIT许可发布的。

看到图标化图标集页面查看集合列表及其许可证。

版本	发布日期	距今
`5.2.4`latest	2026/11/01	2 天前
`5.2.3`	2026/10/19	14 天前
`5.2.2`	2026/06/11	4 个月前
`5.2.1`	2026/01/05	9 个月前
`5.2.0`	2026/01/05	9 个月前
`5.1.0`	2025/11/03	1 年前

@iconify/svelte