https://github.com/metonym/svelte-codicons

VS Code Codicons as Svelte components
https://github.com/metonym/svelte-codicons

codicons icon icon-library svelte svelte-components vs-code

Last synced: 11 days ago
JSON representation

VS Code Codicons as Svelte components

• Host: GitHub
• URL: https://github.com/metonym/svelte-codicons
• Owner: metonym
• License: mit
• Created: 2021-09-01T01:35:01.000Z (about 3 years ago)
• Default Branch: master
• Last Pushed: 2024-08-25T15:52:51.000Z (2 months ago)
• Last Synced: 2024-10-14T08:43:41.345Z (25 days ago)
• Topics: codicons, icon, icon-library, svelte, svelte-components, vs-code
• Language: HTML
• Homepage: https://metonym.github.io/svelte-codicons
• Size: 1.06 MB
• Stars: 4
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# svelte-codicons

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

> [VS Code Codicons](https://github.com/microsoft/vscode-codicons) as Svelte components.

This zero-dependency library uses [svelvg](https://github.com/metonym/svelvg) to convert SVG files from the [@vscode/codicons](https://www.npmjs.com/package/@vscode/codicons) into Svelte components.

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

## Installation

```bash

# NPM

npm i -D svelte-codicons

# pnpm

pnpm i -D svelte-codicons

# Bun

bun add -D svelte-codicons

# Yarn

yarn add -D svelte-codicons

```

## Usage

### Basic

```svelte

  import { Add, Calendar, Edit } from "svelte-codicons";

```

Refer to [ICON_INDEX.md](ICON_INDEX.md) for a list of supported icons.

### Direct import

Use the direct import for faster compiling during development.

```svelte no-eval

  import Add from "svelte-codicons/lib/Add.svelte";

```

## Using `svelte:component`

```svelte

  import * as icons from "svelte-codicons";

{#each Object.entries(icons) as [icon, component]}

  


    

    {icon}

  

{/each}

```


### Custom size

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

Use the `width` and `height` attributes to customize the icon size. The default is 16px.

```svelte

```

### Custom color

Use the `fill` attribute to specify a custom color.

```svelte

```

## License

[MIT](LICENSE)

`vscode-codicons` is licensed as [CC-BY-4.0](https://github.com/microsoft/vscode-codicons/blob/main/LICENSE).

[npm]: https://img.shields.io/npm/v/svelte-codicons.svg?color=%230066B8&style=for-the-badge

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