Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

featherity

Package Overview
Dependencies
Maintainers
1
Versions
14
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

featherity

[![Discord](https://img.shields.io/discord/723074157486800936?label=chat&logo=discord&logoColor=%23ffffff&colorB=%237289DA)](https://discord.gg/EH6nSts)

  • 0.1.0-beta.0
  • latest
  • npm
  • Socket score

Version published
Maintainers
1
Created
Source

Featherity

Discord

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
#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);

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.

FAQs

Package last updated on 24 Sep 2020

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc