Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

carbon-pictograms-svelte

Package Overview
Dependencies
Maintainers
0
Versions
42
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

carbon-pictograms-svelte

Carbon Design System SVG pictograms as Svelte components

  • 12.12.0
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
710
decreased by-34.38%
Maintainers
0
Weekly downloads
 
Created
Source

carbon-pictograms-svelte

NPM GitHub npm downloads to date

Carbon Design System SVG pictograms as Svelte components.

This zero dependency library builds Carbon Design System pictograms as Svelte components. Although best paired with carbon-components-svelte, this library can be consumed standalone.

Try it in the Svelte REPL.

Preview · Pictogram Index

Installation

# 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

<script>
  import { Airplane } from "carbon-pictograms-svelte";
</script>

<Airplane />

Import pictograms directly for faster compiling.

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 unused imports.

Import Path Pattern
import Pictogram from "carbon-pictograms-svelte/lib/<ModuleName>.svelte";

Refer to PICTOGRAM_INDEX.md for a list of available pictograms.

API

Props

$$restProps are forwarded to the svg element.

NameValue
tabindexstring (default: undefined)
fillstring (default: currentColor

Recipes

Custom Fill Color

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

fill prop
<Airplane fill="blue" />
Global class
<Airplane class="custom-class" />

<style>
  :global(svg.custom-class) {
    fill: blue;
  }
</style>

Labelled

<Airplane aria-label="Airplane" />

Labelled with Focus

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

Labelled by

<label id="transportation">Transportation</label>

<Airplane aria-labelledby="transportation" />

TypeScript support

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

Changelog

Contributing

License

Apache-2.0

Keywords

FAQs

Package last updated on 20 Nov 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc