Svelte Simple Icons

Simple Brand Icons for Svelte

Svelte Simple Icons

Install

yarn add --dev svelte-simple-icons

or use NPM

npm install --save-dev svelte-simple-icons

Usage

Unused icons will get removed with tree shaking in bundlers like webpack and rollup.

    <script>
        // Only import what you need!
        import { RIcon, HuluIcon, ... } from 'svelte-simple-icons'
    </script>
    
    <!-- When using custom elements -->
    <hulu-icon />
    
    <!-- When using regular svelte compontent -->
    <HuluIcon />

Use the svg name when importing, and convert it to {PascalCase}Icon. For instance, .NET on the creators site has an SVG name of dot-net.svg, so should be imported as <DotNetIcon /> See all icons here: https://simpleicons.org/

Exceptions

The one notable exception to the rule above is the 500px icon:

    <script>
        import { FiveHundredPxIcon } from 'svelte-simple-icons'
    </script>
    
    <FiveHundredPxIcon />

Styling

You can add CSS classes icons by passing a styleClass attribute:

    <HuluIcon styleClass="some-class other-class" />

Top categories