3.3.1 • Published 4 months ago

svelte-awesome v3.3.1

Weekly downloads
1,948
License
MIT
Repository
github
Last release
4 months ago

Svelte-Awesome

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

3.3.1

4 months ago

3.3.0

5 months ago

3.2.1

11 months ago

3.2.0

1 year ago

3.1.0

1 year ago

3.0.1

1 year ago

3.0.0

2 years ago

2.4.5

2 years ago

2.4.6

2 years ago

2.4.3

2 years ago

2.4.4

2 years ago

2.4.1

3 years ago

2.4.0

3 years ago

2.4.2

3 years ago

2.3.2

3 years ago

2.3.1

3 years ago

2.3.0

4 years ago

2.2.1

4 years ago

2.2.0

5 years ago

2.1.0

5 years ago

2.0.1

5 years ago

2.0.0

5 years ago

1.4.1

6 years ago

1.4.0

6 years ago

1.3.0

6 years ago

1.2.2

6 years ago

1.2.1

6 years ago

1.2.0

6 years ago

1.1.1

6 years ago

1.1.0

6 years ago

1.0.3

6 years ago

1.0.2

6 years ago

1.0.1

6 years ago

1.0.0

6 years ago