sveather v1.1.0

⚠️ This package has been archived because you should use antfu/unplugin-icons for all your icon needs.

sveather

The complete library of Feather icons as uncompiled Svelte components.

Features

• 🍓 Type definitions for editor support
• 🍉 Installs as a dev dependency
• 🥦 100% ES modules = 100% tree shakeable
• 🥕 Works on the client and the server (SvelteKit & Sapper)
• 🍇 Feature list includes fruit and vegetable emojis

Install

yarn add -D sveather
# OR
npm i --save-dev sveather

Component names

Following the Svelte convention, a sveather component is named as the PascalCase of a feather icon.

For example:

Browse all available icons with their feather names here.

Use

<script>
  import { Github } from 'sveather'
</script>

<Github width={1} stroke="#333" />

Performance

For the best development experience with the fastest builds, use a modern build tool such as Vite or Snowpack.

Props

Default

Note: A class prop is not set by default. This is a departure from feather but is intended to give you, the developer, complete control and not pollute the DOM with potentially unused classes. You can of course optionally provide a class prop and target it via global stylesheet if you wish.

Additional

Any additional props can be provided.

Type support exists for all standard SVG attributes as defined in DefinitelyTyped/react—this includes WAI-ARIA attributes.

Slots

Each sveather component contains a slot for receiving any number of nested HTML elements or Svelte components.

For example, if an icon is being used as an image (as opposed to a link or a button) and needs be recognized by screen readers, you might achieve this as follows:

<Github role="img" aria-labelledby="github-icon-title github-icon-desc">
  <title id="github-icon-title">GitHub Octocat</title>
  <desc id="github-icon-desc">Open source the world!</desc>
</Github>