https://github.com/icons-pack/svelte-simple-icons

📦 This package provides the Simple Icons packaged as a set of Svelte components.
https://github.com/icons-pack/svelte-simple-icons

brand brands components design hacktoberfest icons simple-icons svelte svelte-simple-icons sveltejs svg svg-icons ui ui-components

Last synced: about 1 month ago
JSON representation

📦 This package provides the Simple Icons packaged as a set of Svelte components.

• Host: GitHub
• URL: https://github.com/icons-pack/svelte-simple-icons
• Owner: icons-pack
• License: mit
• Created: 2020-05-19T22:49:28.000Z (over 4 years ago)
• Default Branch: main
• Last Pushed: 2024-05-07T17:33:31.000Z (8 months ago)
• Last Synced: 2024-11-15T21:44:07.420Z (about 2 months ago)
• Topics: brand, brands, components, design, hacktoberfest, icons, simple-icons, svelte, svelte-simple-icons, sveltejs, svg, svg-icons, ui, ui-components
• Language: JavaScript
• Homepage:
• Size: 3.86 MB
• Stars: 53
• Watchers: 3
• Forks: 2
• Open Issues: 9
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        


  


# svelte-simple-icons

This package provides the [Simple Icons 11.5.0](https://github.com/simple-icons/simple-icons/releases/tag/11.5.0) packaged as a set of [Svelte](https://svelte.dev/) components.

  

    

  

  

    

  

  

    

  

  

    

  



## Installation

Install the package in your project directory with:

```sh

// with yarn

yarn add @icons-pack/svelte-simple-icons

// with npm

npm add @icons-pack/svelte-simple-icons

```

## Usage

All icons are imported from a single file, where [ICON SLUG] is replaced by a capitalized [slug](https://github.com/simple-icons/simple-icons/blob/master/slugs.md).

## Demo

[Edit codesandbox](https://codesandbox.io/s/busy-satoshi-g52wq?file=/App.svelte)

## Basic example

```svelte

  

  

  

    import { SiReact, SiSvelte, SiDocker } from "@icons-pack/svelte-simple-icons";

  

  

  

  

```

## Change title

```svelte

  

  

    import { SiSvelte } from "@icons-pack/svelte-simple-icons";

  

  

```

## Custom styles

```svelte

  

    import { SiSvelte } from "@icons-pack/svelte-simple-icons";

  

  

  

    .myStyle {

      width: 35px;

      height: 35px;

    }

  

```