@icons-pack/svelte-simple-icons

svelte-simple-icons

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

Installation

Install the package in your project directory with:

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

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

Usage

You can use simpleicons.org to find a specific icon. When importing an icon, keep in mind that the names of the icons are upperCamelCase , for instance:

• Material Design is exposed as { Materialdesign } from @icons-pack/svelte-simple-icons
• azure devOps is exposed as { Azuredevops } from @icons-pack/svelte-simple-icons

These are some exceptions to this rule:

• 500px is exposed as { FiveHundredPx } from @icons-pack/svelte-simple-icons
• c++ is exposed as { Cplusplus } from @icons-pack/svelte-simple-icons
• .Net is exposed as { DotNet } from @icons-pack/svelte-simple-icons
• D3.js is exposed as { D3DotJs } from @icons-pack/svelte-simple-icons
• dev.to is exposed as { DevDotTo } from @icons-pack/svelte-simple-icons
• webcomponents.org is exposed as { WebcomponentsDotOrg } from @icons-pack/svelte-simple-icons
• X.Org is exposed as { XDotOrg } from @icons-pack/svelte-simple-icons
• FerrarinDotVDot is exposed as { FerrarinDotVDot } from @icons-pack/svelte-simple-icons

Demo

Edit codesandbox

Basic example

  <script>
    import { ReactJs, Svelte, Docker } from "@icons-pack/svelte-simple-icons";
  </script>

  <Svelte color="#FF3E00" size={90} />

  <ReactJs color="#61DAFB" size={50} />

  <Docker />

Change title

  <!-- title default "Svelte" -->
  <script>
    import { Svelte } from "@icons-pack/svelte-simple-icons";
  </script>

  <Svelte title="My title" />

Custom styles

  <script>
    import { Svelte } from "@icons-pack/svelte-simple-icons";
  </script>

  <Svelte class="myStyle" />

  <style>
    .myStyle {
      width: 35px;
      height: 35px;
    }
  </style>