@ canonical/ svelte- icons (英语)
Canonical的设计系统图标被包装为Svelte 5组件. 此库提供来自 Canonical的Pragma设计系统 作为易于使用的斯维尔特组件.
[尖叫声] 这个包裹是实验阶段 在稳定释放之前,可能会发生重大变化。 目前不建议生产使用.
安装
bun add @canonical/svelte-icons
使用量
基本用途
单独导入图标并将其用作组件 :
<script>
import { HomeIcon, SettingsIcon, UserIcon } from "@canonical/svelte-icons";
</script>
<HomeIcon />
<SettingsIcon class="custom-class" />
<UserIcon />
样式图标
图标默认继承当前文本的颜色和大小.
<script>
import { SearchIcon } from "@canonical/svelte-icons";
</script>
<SearchIcon style="color: red; width: 2em; height: 2em;" />
性能优化
当多次使用同一图标时,可以使用 IconsOptimizationProvider 在生成标记中复制 SVG 定义:
<script>
import { IconsOptimizationProvider, HomeIcon } from "@canonical/svelte-icons";
</script>
<IconsOptimizationProvider>
<nav>
<HomeIcon />
<!-- All instances share the same SVG definition -->
<HomeIcon />
<HomeIcon />
</nav>
</IconsOptimizationProvider>
这在多次渲染同一图标时特别有用.
看看这个 节点树大小比较 故事可以看到DOM的大小差异 优化与非优化渲染.
自定义图标
您也可以使用 IconBase 组件 :
<script>
import { IconBase } from "@canonical/svelte-icons";
</script>
<IconBase iconName="my-custom-icon">
<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<circle cx="8" cy="8" r="6" stroke="black" stroke-width="1" fill="red" />
</svg>
</IconBase>
[大 当使用自定义图标时
IconsOptimizationProvider数字 :
- 确保
iconName道具是每个自定义图标独有的以避免相撞,- 修改内部的 SVG 内容
IconBase运行时间可能导致出乎意料的行为.看看这个 反应操场 故事来学习更多.
图标来源
所有 SVG 图标来自 @ canonical/ ds- 资产 包,是Canonical的Pragma设计系统的一部分.
发展
# Install dependencies
bun install
# Build icon components from source
bun run build
# Run Storybook for development
bun run storybook
# Lint, type check and verify metadata.json is up to date
bun run check
生成图标元数据
metadata.json 持有由视觉模型生成的每个图标的搜索标记
从图标及其名称。 每个条目还存储一个散列
图标的 SVG,所以生成器只调用新图标的模型
已更改, 或还没有标记; 所有其他标记都重新使用 。 图标条目
不再存在.
bun run check (和CI) 失败时 metadata.json 没有同步到
@canonical/ds-assets,所以在撞出软件包后运行生成器:
# Set OPENROUTER_API_KEY in your environment or ignored .env file.
bun run build:metadata
生成器接受支持 OpenAI 兼容聊天的任何端点
结业. 模型 必须支持图像输入。默认情况下,它使用
打开路透器 google/gemma-4-26b-a4b-it数字 :
# Override the OpenRouter model.
bun run build:metadata --model google/gemini-3.1-flash-lite
对于自定义终点,请通过 API 基础 URL 和一个明确的模式:
# Ollama: start the server and download the chosen model beforehand.
bun run build:metadata --base-url http://localhost:11434/v1 --model gemma4:26b
# llama.cpp: start llama-server with your model; use its served model ID.
bun run build:metadata --base-url http://localhost:8080/v1 --model your-served-model-id
自定义端点只使用 METADATA_API_KEY 供应时,否则无
认证头已发送 .
图标默认一次处理 6; 用 --concurrency
(或 -j),例如. -j 1 用于慢本地服务器。 120后请求暂停
秒和重试最多2次,有备份,超时,网络
错误、 速率限制和服务器错误 。 增加慢本地模型的超时
--timeout <seconds>的图标
剩余结果被写入,命令退出状态为非零.
每个生成的图标被记录在一条有其标记的单行上. 添加 --verbose
(或 -v)还登录模型对绘图的描述及其含义.
被再用标记实现常态化(小写,去字,填字被去掉).
添加 --clean (或 -c)重新生成所有图标的标记.