svelte-healthicons

Healthicons SVG icons as Svelte components

Usage no npm install needed!

<script type="module">
  import svelteHealthicons from 'https://cdn.skypack.dev/svelte-healthicons';
</script>

README

svelte-healthicons

NPM

Healthicons SVG icons as Svelte components.

Try it in the Svelte REPL.

Installation

Yarn

yarn add -D svelte-healthicons

NPM

npm i -D svelte-healthicons

Usage

Basic

<script>
  import {
    FilledBodyArm,
    NegativeBodyEnzyme,
    OutlineDevicesMicroscope,
  } from "svelte-healthicons";
</script>

<FilledBodyArm />
<NegativeBodyEnzyme />
<OutlineDevicesMicroscope />

Refer to ICON_INDEX.md for a list of supported icons.

Direct import

Use the direct import for faster compiling during development.

Note: even if using base imports, unused imports are still tree shakeable by application bundlers like Rollup or webpack.

<script>
  import Arm from "svelte-healthicons/lib/Arm.svelte";
</script>

Using svelte:component

<script>
  import * as icons from "svelte-healthicons";
</script>

{#each Object.entries(icons) as [icon, component]}
  <div>
    <svelte:component this={component} />
    {icon}
  </div>
{/each}

TypeScript

Svelte version 3.31 or greater is required to use this library with TypeScript.

Changelog

Developing this library

Currently, healthicons is not published to the NPM registry. We do the following to build the library:

  1. Execute build.sh which downloads svg icons from https://github.com/resolvetosavelives/healthicons/public/icons/svg to node_modules/healthicons
  2. Run build.js which uses svelvg to create a Svelte component library

License

MIT