diff --git a/README.md b/README.md index 7a6706a..dec6ad1 100644 --- a/README.md +++ b/README.md @@ -30,92 +30,75 @@ bun add carbon-pictograms-svelte ## Usage -### Base Import +### Direct Import + +Import the icon from the `carbon-pictograms-svelte/lib` folder. See the [Pictogram Index](PICTOGRAM_INDEX.md) for a list of supported pictograms. ```svelte ``` -### Direct Import (recommended) +### Base Import with Preprocessor -Import pictograms directly for faster compiling. +> [!TIP] +> Use [optimizeImports](https://github.com/carbon-design-system/carbon-preprocess-svelte#optimizeimports) from [carbon-preprocess-svelte](https://github.com/carbon-design-system/carbon-preprocess-svelte) to speed up development times. -```js -import Airplane from "carbon-pictograms-svelte/lib/Airplane.svelte"; -``` +Due to the size of the library, importing directly from the barrel file may result in slow development times, since the entire barrel file is imported (thousands of pictograms). -**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. +[optimizeImports](https://github.com/carbon-design-system/carbon-preprocess-svelte#optimizeimports) is a Svelte preprocessor that optimizes import paths from Carbon Svelte libraries. It enables you to use the barrel file import syntax without importing the entire library. -#### Import Path Pattern +For example, the following is automatically re-written by `optimizeImports`: -```js -import Pictogram from "carbon-pictograms-svelte/lib/.svelte"; +```diff +- import { Airplane } from "carbon-pictograms-svelte"; ++ import Airplane from "carbon-pictograms-svelte/lib/Airplane.svelte"; ``` -Refer to [PICTOGRAM_INDEX.md](PICTOGRAM_INDEX.md) for a list of available pictograms. - -## API - -### Props +This offers the best of both worlds: -`$$restProps` are forwarded to the `svg` element. - -| Name | Value | -| :------- | :-------------------------------- | -| tabindex | `string` (default: `undefined`) | -| fill | `string` (default: `currentColor` | +- Concise import syntax +- Fast development times (only the icons you need are imported) -## Recipes +## API -### Custom Fill Color +All props are optional. -Customize the fill color using the `fill` prop or by defining a global class. +| Name | Type | Default value | +| :---- | :------- | :------------ | +| title | `string` | `undefined` | -#### `fill` prop +### Custom props -```svelte - -``` +`$$restProps` are forwarded to the `svg` element. -#### Global class +You can use `fill` to customize the color or pass any other valid `svg` attribute to the component. ```svelte - - - + ``` ### Labelled -```html +```svelte ``` -### Labelled with Focus - -```html - -``` - ### Labelled by -```html +```svelte - ``` -## TypeScript support +### Focusable -Svelte version 3.31 or greater is required to use this library with TypeScript. +```svelte + +``` ## [Changelog](CHANGELOG.md) diff --git a/package.json b/package.json index 0400c7d..ac42285 100644 --- a/package.json +++ b/package.json @@ -32,7 +32,7 @@ "type": "git", "url": "git+https://github.com/carbon-design-system/carbon-pictograms-svelte.git" }, - "homepage": "https://github.com/carbon-design-system/carbon-pictograms-svelte", + "homepage": "https://carbon-pictograms-svelte.onrender.com/", "bugs": "https://github.com/carbon-design-system/carbon-pictograms-svelte/issues", "keywords": [ "carbon",