README
svelte-simple-icons
This package provides the Simple Icons 5.7.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
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>