https://github.com/carbon-design-system/carbon-pictograms-svelte

Carbon Design System SVG pictograms as Svelte components
https://github.com/carbon-design-system/carbon-pictograms-svelte

carbon carbon-design-system pictograms svelte svelte-component svg typescript-definitions

Last synced: 5 days ago
JSON representation

Carbon Design System SVG pictograms as Svelte components

• Host: GitHub
• URL: https://github.com/carbon-design-system/carbon-pictograms-svelte
• Owner: carbon-design-system
• License: apache-2.0
• Created: 2020-04-06T23:41:02.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2024-11-17T22:21:52.000Z (25 days ago)
• Last Synced: 2024-11-17T23:21:19.644Z (25 days ago)
• Topics: carbon, carbon-design-system, pictograms, svelte, svelte-component, svg, typescript-definitions
• Language: TypeScript
• Homepage: https://carbon-pictograms-svelte.onrender.com
• Size: 4.75 MB
• Stars: 119
• Watchers: 7
• Forks: 7
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: CONTRIBUTING.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE
  • Security: SECURITY.md

Awesome Lists containing this project

• awesome-starred - carbon-design-system/carbon-pictograms-svelte - Carbon Design System SVG pictograms as Svelte components (svelte)

README

        
# carbon-pictograms-svelte

[![NPM][npm]][npm-url]

![GitHub](https://img.shields.io/github/license/ibm/carbon-pictograms-svelte?color=262626&style=for-the-badge)

![npm downloads to date](https://img.shields.io/npm/dt/carbon-pictograms-svelte?color=262626&style=for-the-badge)

> [Carbon Design System](https://github.com/carbon-design-system) SVG pictograms as Svelte components.

This zero dependency library builds [Carbon Design System pictograms](https://www.carbondesignsystem.com/guidelines/pictograms/library) as Svelte components. Although best paired with [carbon-components-svelte](https://github.com/IBM/carbon-components-svelte), this library can be consumed standalone.

Try it in the [Svelte REPL](https://svelte.dev/repl/88b99674d0f24a3a8948d3760f8ba999).

## [Preview](https://carbon-pictograms-svelte.onrender.com/) · [Pictogram Index](PICTOGRAM_INDEX.md)

## Installation

```sh

# npm

npm i carbon-pictograms-svelte

# pnpm

pnpm i carbon-pictograms-svelte

# Yarn

yarn add carbon-pictograms-svelte

# Bun

bun add carbon-pictograms-svelte

```

## Usage

### Base Import

```svelte

  import { Airplane } from "carbon-pictograms-svelte";

```

### Direct Import (recommended)

Import pictograms directly for faster compiling.

```js

import Airplane from "carbon-pictograms-svelte/lib/Airplane.svelte";

```

**Note:** Even if using the base import method, an application bundler like Rollup or webpack should [tree shake](https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking) unused imports.

#### Import Path Pattern

```js

import Pictogram from "carbon-pictograms-svelte/lib/.svelte";

```

Refer to [PICTOGRAM_INDEX.md](PICTOGRAM_INDEX.md) for a list of available pictograms.

## API

### Props

`$$restProps` are forwarded to the `svg` element.

| Name     | Value                             |

| :------- | :-------------------------------- |

| tabindex | `string` (default: `undefined`)   |

| fill     | `string` (default: `currentColor` |

## Recipes

### Custom Fill Color

Customize the fill color using the `fill` prop or by defining a global class.

#### `fill` prop

```svelte

```

#### Global class

```svelte

  :global(svg.custom-class) {

    fill: blue;

  }

```

### Labelled

```html

```

### Labelled with Focus

```html

```

### Labelled by

```html

Transportation

```

## TypeScript support

Svelte version 3.31 or greater is required to use this library with TypeScript.

## [Changelog](CHANGELOG.md)

## [Contributing](CONTRIBUTING.md)

## License

[Apache-2.0](LICENSE)

[npm]: https://img.shields.io/npm/v/carbon-pictograms-svelte.svg?color=262626&style=for-the-badge

[npm-url]: https://npmjs.com/package/carbon-pictograms-svelte