Carbon Icons Svelte 使用教程

Carbon Icons Svelte 使用教程

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

项目介绍

Carbon Icons Svelte 是一个零依赖的图标库，它将 Carbon Design System 的 SVG 图标构建为 Svelte 组件。这些图标可以作为独立的组件使用，非常适合与 Carbon Components Svelte 一起使用，但也可以单独使用。

项目快速启动

安装

首先，你需要安装 carbon-icons-svelte 作为开发依赖：

# 使用 npm
npm i -D carbon-icons-svelte

# 使用 pnpm
pnpm i -D carbon-icons-svelte

# 使用 Yarn
yarn add -D carbon-icons-svelte

# 使用 Bun
bun add -D carbon-icons-svelte

基本使用

导入图标并在你的 Svelte 组件中使用：

<script>
  import Add from "carbon-icons-svelte/lib/Add.svelte";
</script>

<Add />

自定义大小

你可以使用 size 属性来指定图标的大小，支持的大小包括 16、20、24 和 32。默认大小是 16：

<Add size={16} />
<Add size={20} />
<Add size={24} />
<Add size={32} />

自定义属性

你可以使用 fill 属性来自定义颜色，或者传递任何其他有效的 SVG 属性：

<Add fill="red" class="icon" />

带标签的图标

你可以为图标添加标签，使其更具可访问性：

<Add aria-label="Add" />

可聚焦的带标签图标

使图标可聚焦：

<Add aria-label="Add" tabindex="0" />

通过标签标记

使用 aria-labelledby 属性：

<label id="add-file">Add file</label>
<Add aria-labelledby="add-file" />

应用案例和最佳实践

案例1：在表单中使用图标

在表单中使用图标可以提高用户体验，例如在按钮中添加图标：

<button>
  <Add aria-label="Add item" />
  Add item
</button>

案例2：导航栏图标

在导航栏中使用图标可以使导航更加直观：

<nav>
  <a href="/home">
    <Home aria-label="Home" />
  </a>
  <a href="/settings">
    <Settings aria-label="Settings" />
  </a>
</nav>

最佳实践

• 始终为图标添加可访问性标签，以确保所有用户都能理解其含义。
• 使用 size 属性来统一图标的大小，以保持视觉一致性。
• 在需要强调的地方使用自定义颜色，以吸引用户的注意力。

典型生态项目

Carbon Components Svelte

Carbon Components Svelte 是 Carbon Design System 的 Svelte 实现，它提供了丰富的 UI 组件，与 Carbon Icons Svelte 配合使用可以构建出一致且美观的界面。

SvelteKit

SvelteKit 是一个用于构建高性能、可扩展的 Web 应用程序的框架，它与 Svelte 和 Carbon Icons Svelte 结合使用，可以快速开发出现代化的 Web 应用。

Tailwind CSS

Tailwind CSS 是一个实用程序优先的 CSS 框架，它可以与 Svelte 和 Carbon Icons Svelte 结合使用，通过简单的类名来快速构建样式。

通过这些生态项目的结合，你可以构建出功能丰富、样式一致的 Web 应用程序。

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