Featherity
What is Featherity?
Featherity is a fork of Feather Icons, with icons sourced by the community.
Table of Contents
Installation
Package Managers
npm install featherity
yarn add featherity
CDN
<script src="https://unpkg.com/featherity@latest/dist/umd/featherity.js"></script>
<script src="https://unpkg.com/featherity@latest"></script>
Usage
At its core, Featherity is a collection of SVG files. This means that you can use Feather icons in all the same ways you can use SVGs (e.g. img
, background-image
, inline
, object
, embed
, iframe
). Here's a helpful article detailing the many ways SVGs can be used on the web: SVG on the Web – Implementation Options
The following are additional ways you can use Featherity.
With the Javascript library you can easily incorporate icon in you webpage.
<i icon-name="menu"></i>
It will replace the html with a svg.
With unpkg
Here is a complete example with unpkg
<!DOCTYPE html>
<body>
<i icon-name="volume-2" class="my-class"></i>
<i icon-name="x"></i>
<i icon-name="menu"></i>
<script src="https://unpkg.com/featherity@latest"></script>
<script>
featherity.createIcons();
</script>
</body>
With ESModules
To reduce bundle size, featherity is build to be fully threeshakeble.
The createIcons
function will search for HTMLElements with the attribute icon-name
and replace it with the svg from the given icon name.
<i icon-name="menu"></i>
import { createIcons, icons } from 'featherity';
createIcons({icons});
import { createIcons, Menu, ArrowRight, Globe } from 'featherity';
createIcons({
icons: {
Menu,
ArrowRight,
Globe,
},
});
Additional Options
In the createIcons
function you can pass some extra parameters to adjust the nameAttr
or add custom attributes like for example classes.
Here is a full example:
import { createIcons } from 'featherity';
createIcons({
attrs: {
class: ['my-custom-class', 'icon'],
'stroke-width': 1,
stroke: '#333',
},
nameAttr: 'icon-name',
});
Threeshake the library, only use the icons you use
import { createIcons, Menu, ArrowRight, Globe } from 'featherity';
createIcons({
icons: {
Menu,
ArrowRight,
Globe,
},
});
Custom Element binding
import { createElement, Menu } from 'featherity';
const menuIcon = createElement(Menu);
menuIcon.setAttribute('stroke', '#333');
menuIcon.classList.add('my-icon-class');
const myApp = document.getElementById('app');
myApp.appendChild(menuIcon);
Figma
You can use the components from this Figma file.
Contributing
For more info on how to contribute please see the contribution guidelines.
Caught a mistake or want to contribute to the documentation? Edit this page on Github
Do you want to join our community?
Join us in discord!
License
Feather is licensed under the ISC License.