Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/RobBrazier/svelte-awesome

Awesome SVG icon component for Svelte JS, built with Font Awesome icons. Based on Justineo/vue-awesome
https://github.com/RobBrazier/svelte-awesome

List: svelte-awesome

font font-awesome icon icons svelte sveltejs svg svg-icon-component svg-icons

Last synced: 5 days ago
JSON representation

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

Host: GitHub
URL: https://github.com/RobBrazier/svelte-awesome
Owner: RobBrazier
License: mit
Created: 2017-11-13T22:37:24.000Z (almost 7 years ago)
Default Branch: master
Last Pushed: 2024-10-28T05:51:00.000Z (11 days ago)
Last Synced: 2024-10-29T17:12:09.885Z (10 days ago)
Topics: font, font-awesome, icon, icons, svelte, sveltejs, svg, svg-icon-component, svg-icons
Language: TypeScript
Homepage: https://docs.robbrazier.com/svelte-awesome/
Size: 14.2 MB
Stars: 493
Watchers: 8
Forks: 27
Open Issues: 5
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE

Awesome Lists containing this project

awesome-svelte - svelte-awesome - Awesome SVG icon component, built with Font Awesome icons. (UI Components / Icons)

README

        # Svelte-Awesome

[![GitHub Workflow Status](https://img.shields.io/github/actions/workflow/status/RobBrazier/svelte-awesome/build.yaml?style=flat-square&branch=master)](https://github.com/RobBrazier/svelte-awesome/actions)

[![Codacy grade](https://img.shields.io/codacy/grade/5543afb1136e45e2b7bae46332f94d60?style=flat-square)](https://app.codacy.com/gh/RobBrazier/svelte-awesome/dashboard)

[![npm](https://img.shields.io/npm/v/svelte-awesome.svg?style=flat-square)](https://www.npmjs.com/package/svelte-awesome)

[![bundlephobia](https://img.shields.io/bundlephobia/minzip/svelte-awesome?style=flat-square)](https://bundlephobia.com/result?p=svelte-awesome)

[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)

> Awesome SVG icon component for Svelte JS, built with Font Awesome icons.

> Based on [Justineo/vue-awesome][vue-awesome]

Svelte-Awesome supports [Font-Awesome][font-awesome] `v4.7.0` (icons inbuilt)

and `v5`/`v6` (via [`@fortawesome` npm packages][fortawesome-icons])

A demo is available [here][demo]

A list of all available embedded icons is available [here][icons]

## Installation

### NPM

```bash

npm install --save svelte-awesome

```

## Usage

```html

  

  

  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';

```

## Sapper Usage

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

```javascript

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

```

## Contributors

[![Contributors](https://contrib.rocks/image?repo=robbrazier/svelte-awesome)](https://github.com/RobBrazier/svelte-awesome/graphs/contributors)

[vue-awesome]: https://github.com/Justineo/vue-awesome

[font-awesome]: https://github.com/FortAwesome/Font-Awesome

[demo]: https://robbrazier.github.io/svelte-awesome

[icons]: https://robbrazier.github.io/svelte-awesome/icons

[fortawesome-icons]: https://www.npmjs.com/search?q=%40fortawesome%20icons