快速开始

本指南会帮助你在 Svelte 项目中开始使用 YCloud Icons。 请先确保你已经准备好 Svelte 开发环境。如果还没有，可以使用 Vite 或其他你熟悉的 Svelte 脚手架创建一个新项目。

版本要求

@ycloud-web/icons-svelte 的最低版本要求：Svelte ^5。

安装

pnpm

pnpm install @ycloud-web/icons-svelte@latest

yarn

yarn add @ycloud-web/icons-svelte@latest

npm

npm install @ycloud-web/icons-svelte@latest

bun

bun add @ycloud-web/icons-svelte@latest

导入第一个图标

YCloud Icons 基于 ES Modules 构建，因此可以完整支持 tree-shaking。

每个图标都可以作为 Svelte component 导入，并渲染为内联 SVG 元素。这样最终产物只会包含你实际导入的图标，其余未使用的图标会被构建工具移除。

<script>
  import Camera from '@ycloud-web/icons-svelte/icons/camera';
</script>

<Camera />

属性

你可以通过以下 props 调整图标外观：

名称	类型	默认值
size	number	24
color	string	currentColor
stroke-width	number	2
absoluteStrokeWidth	boolean	false
default-class	string	ycloud-icon

由于图标最终会渲染为 SVG 元素，所有标准 SVG 属性也可以作为 props 传入。可参考 MDN 上的 SVG Presentation Attributes 列表。

<script>
  import Camera from '@ycloud-web/icons-svelte/icons/camera';
</script>

<Camera size={48} color="red" strokeWidth={1} />

继续阅读下面的内容，了解更多 props 用法和示例：

颜色调整图标颜色。尺寸调整图标尺寸。描边宽度调整图标描边宽度。