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#oryarn add featherity
CDN
<!-- Development version --><!-- Production version -->
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.
It will replace the html with a svg.
With unpkg
Here is a complete example with unpkg
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.
<!-- Your HTML file -->
; // Caustion, this will import all the icons and bundle them.; // Recommended way, to include only the icons you need.; ;
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:
; ;
Threeshake the library, only use the icons you use
; ;
Custom Element binding
; const menuIcon = ; // Returns HTMLElement (svg) // set custom attributes with browser native functionsmenuIcon;menuIconclassList; // Append HTMLElement in webpageconst myApp = document;myApp;
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
Community
Do you want to join our community? Join us in discord!
License
Feather is licensed under the ISC License.