Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/michaelbazos/featherish
Web Components Vector Icons 🚀🆕
https://github.com/michaelbazos/featherish
Last synced: 4 days ago
JSON representation
Web Components Vector Icons 🚀🆕
- Host: GitHub
- URL: https://github.com/michaelbazos/featherish
- Owner: michaelbazos
- License: mit
- Created: 2018-02-15T16:45:55.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2018-02-24T16:43:36.000Z (over 6 years ago)
- Last Synced: 2024-11-01T22:43:28.445Z (11 days ago)
- Language: JavaScript
- Homepage:
- Size: 69.3 KB
- Stars: 12
- Watchers: 2
- Forks: 1
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
## featherish
[]()
[]()
[]()
[](https://david-dm.org/michaelbazos/featherish)
### Description
Framework-agnostic Web Components vector icons for modern web applications. Design of the icons by [Cole Bemis](https://github.com/colebemis/).
### Demos
| No framework | Angular | React | Vue |
| -- | -- | -- | -- |
| **[Demo](https://stackblitz.com/edit/featherish?file=index.html)** | **[Demo](https://stackblitz.com/edit/angular-featherish?file=app%2Fapp.module.ts)** | **[Demo](https://stackblitz.com/edit/react-featherish?file=index.js)** | **[Demo](https://stackblitz.com/edit/vue-featherish?file=index.js)** |
### Usage
_1. Install the package_
```sh
npm install featherish
```
_2. Import icons you need_
```js
import 'featherish/icons/github';
import 'featherish/icons/gitlab';
import 'featherish/icons/heart';
import 'featherish/icons/moon';
```
_3. Use_
```html
```
Note that you might need to add a polyfill. For that, npm install `@webcomponents/custom-elements` and import the polyfill before importing the icons.
```js
import '@webcomponents/custom-elements/src/native-shim';
```
### Styling icons
Icons can be customised with any CSS property that you can apply on a SVG element.
```html
```
```css
.big {
height: 50px;
width: 50px;
}
.fill-red {
fill: red;
}
```
### Available icons
Refer to the table below for the list of all available icons.
| | | | | |
| --- | --- | --- | --- | --- |
|  `` |  `` |  `` |  `` |  `` |
|  `` |  `` |  `` |  `` |  `` |
|  `` |  `` |  `` |  `` |  `` |
|  `` |  `` |  `` |  `` |  `` |
|  `` |  `` |  `` |  `` |  `` |
|  `` |  `` |  `` |  `` |  `` |
|  `` |  `` |  `` |  `` |  `` |
|  `` |  `` |  `` |  `` |  `` |
|  `` |  `` |  `` |  `` |  `` |
|  `` |  `` |  `` |  `` |  `` |
|  `` |  `` |  `` |  `` |  `` |
|  `` |  `` |  `` |  `` |  `` |
|  `` |  `` |  `` |  `` |  `` |
|  `` |  `` |  `` |  `` |  `` |
|  `` |  `` |  `` |  `` |  `` |
|  `` |  `` |  `` |  `` |  `` |
|  `` |  `` |  `` |  `` |  `` |
|  `` |  `` |  `` |  `` |  `` |
|  `` |  `` |  `` |  `` |  `` |
|  `` |  `` |  `` |  `` |  `` |
|  `` |  `` |  `` |  `` |  `` |
|  `` |  `` |  `` |  `` |  `` |
|  `` |  `` |  `` |  `` |  `` |
|  `` |  `` |  `` |  `` |  `` |
|  `` |  `` |  `` |  `` |  `` |
|  `` |  `` |  `` |  `` |  `` |
|  `` |  `` |  `` |  `` |  `` |
|  `` |  `` |  `` |  `` |  `` |
|  `` |  `` |  `` |  `` |  `` |
|  `` |  `` |  `` |  `` |  `` |
|  `` |  `` |  `` |  `` |  `` |
|  `` |  `` |  `` |  `` |  `` |
|  `` |  `` |  `` |  `` |  `` |
|  `` |  `` |  `` |  `` |  `` |
|  `` |  `` |  `` |  `` |  `` |
|  `` |  `` |  `` |  `` |  `` |
|  `` |  `` |  `` |  `` |  `` |
|  `` |  `` |  `` |  `` |  `` |
|  `` |  `` |  `` |  `` |  `` |
|  `` |  `` |  `` |  `` |  `` |
|  `` |  `` |  `` |  `` |  `` |
|  `` |  `` |  `` |  `` |  `` |
|  `` |  `` |  `` |  `` |  `` |
|  `` |  `` |  `` |  `` |  `` |
|  `` |  `` |  `` |  `` |  `` |
|  `` |  `` |  `` |  `` |  `` |
|  `` |  `` |  `` |  `` |  `` |
|  `` |  `` |  `` |  `` |  `` |
|  `` |  `` |  `` |  `` |  `` |
|  `` |  `` |  `` |  `` |  `` |
|  `` |  `` |  `` |  `` |  `` |
|  `