Svelte-Awesome

December 1, 2023 ยท View on GitHub

GitHub Workflow Status Codacy grade npm bundlephobia PRs Welcome

Awesome SVG icon component for Svelte JS, built with Font Awesome icons. Based on Justineo/vue-awesome

Svelte-Awesome supports Font-Awesome v4.7.0 (icons inbuilt) and v5/v6 (via @fortawesome npm packages)

A demo is available here

A list of all available embedded icons is available here

Installation

NPM

npm install --save svelte-awesome

Usage

<!-- basic -->
<Icon data="{beer}" />
<!-- codeFork is camelCase, unlike the js file, code-fork.js -->
<Icon data="{codeFork}" />

<!-- with options -->
<Icon data="{refresh}" scale="2" />
<Icon data="{comment}" flip="horizontal" />
<Icon data="{codeFork}" label="Forked Repository" />

<!-- stacked icons [WIP] -->
<Icon label="No Photos">
  <Icon data="{camera}" />
  <Icon name="{ban}" scale="2" class="alert" />
</Icon>

<!-- FontAwesome v5 and v6 Icons supported -->
<Icon data="{faThumbsUp}" />

<script>
  import Icon from 'svelte-awesome';

  /// *** Embedded Icons ***
  // Recommended - import just the icon you need
  import beer from 'svelte-awesome/icons/beer';
  import refresh from 'svelte-awesome/icons/refresh';
  import codeFork from 'svelte-awesome/icons/codeFork';
  import camera from 'svelte-awesome/icons/camera';
  import ban from 'svelte-awesome/icons/ban';
  // Not recommended as it will download all of the icons in dev mode
  import { ban } from 'svelte-awesome/icons';

  // EDGECASE ICONS - different names due to reserved names / starting with numbers
  import fa500px from 'svelte-awesome/icons/fa500px'; // '500px' icon
  import faTry from 'svelte-awesome/icons/faTry'; // 'try' icon

  /// *** @fortawesome/* Icons ***
  // Recommended - import the individual icon a little like with the recommended embedded icons approach above
  import { faThumbsUp } from '@fortawesome/free-regular-svg-icons/faThumbsUp';
  // Not Recommended - import the individual icon from the main file - it will download all of the icons in dev mode
  import { faThumbsUp } from '@fortawesome/free-regular-svg-icons';
</script>

Sapper Usage

For Sapper, you may need to import the Icon component explicitly as below:

import Icon from 'svelte-awesome/components/Icon.svelte';

Contributors

Contributors