Carbon Pictograms Svelte 使用教程

Carbon Pictograms Svelte 使用教程

carbon-pictograms-svelteCarbon Design System SVG pictograms as Svelte components项目地址:https://gitcode.com/gh_mirrors/ca/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 应用程序。

carbon-pictograms-svelteCarbon Design System SVG pictograms as Svelte components项目地址:https://gitcode.com/gh_mirrors/ca/carbon-pictograms-svelte