Featherity NPM

Featherity

What is Featherity?

Featherity is a fork of Feather Icons, with icons sourced by the community.

Usage
- Figma
Contributing
License

Installation

Package Managers

npm install featherity
#or
yarn add featherity

CDN

<!-- Development version -->
<script src="https://unpkg.com/featherity@latest/dist/umd/featherity.js"></script>

<!-- Production version -->
<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.

<!-- Your HTML file -->
<i icon-name="menu"></i>

import { createIcons, icons } from 'featherity';

// Caustion, this will import all the icons and bundle them.
createIcons({icons});

// Recommended way, to include only the icons you need.
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', // atrribute for the 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); // Returns HTMLElement (svg)

// set custom attributes with browser native functions
menuIcon.setAttribute('stroke', '#333');
menuIcon.classList.add('my-icon-class');

// Append HTMLElement in webpage
const myApp = document.getElementById('app');
myApp.appendChild(menuIcon);