Carbon Pictograms Svelte 使用教程
项目介绍
Carbon Pictograms Svelte 是一个零依赖的库,它将 Carbon Design System 的 SVG 象形图构建为 Svelte 组件。尽管最佳搭配是与 carbon-components-svelte 一起使用,但这个库也可以独立消费。
项目快速启动
安装
首先,安装 carbon-pictograms-svelte
作为开发依赖:
# 使用 npm
npm i -D carbon-pictograms-svelte
# 使用 pnpm
pnpm i -D carbon-pictograms-svelte
# 使用 Yarn
yarn add -D carbon-pictograms-svelte
# 使用 Bun
bun add -D carbon-pictograms-svelte
使用
基础导入
<script>
import { Airplane } from "carbon-pictograms-svelte";
</script>
<Airplane />
直接导入(推荐)
直接导入象形图以加快编译速度:
<script>
import Airplane from "carbon-pictograms-svelte/lib/Airplane.svelte";
</script>
<Airplane />
注意:即使使用基础导入方法,应用程序打包工具(如 Rollup 或 webpack)应该能够摇树优化未使用的导入。
应用案例和最佳实践
自定义填充颜色
可以通过 fill
属性或定义全局类来自定义填充颜色:
<Airplane fill="blue" />
<!-- 或使用全局类 -->
<Airplane class="custom-class" />
<style>
:global(svg.custom-class) {
fill: blue;
}
</style>
带标签的象形图
<Airplane aria-label="Airplane" />
<!-- 带焦点的象形图 -->
<Airplane aria-label="Airplane" tabindex="0" />
<!-- 通过标签标记的象形图 -->
<label id="transportation">Transportation</label>
<Airplane aria-labelledby="transportation" />
典型生态项目
Carbon Pictograms Svelte 可以与以下项目结合使用:
- carbon-components-svelte: 提供 Carbon Design System 的 Svelte 组件。
- SvelteKit: 一个用于构建高性能 Web 应用程序的 Svelte 框架。
- Rollup 或 webpack: 用于打包和优化 Svelte 应用程序的工具。
通过这些项目的结合使用,可以构建出高效、美观且符合 Carbon Design System 规范的 Web 应用程序。