featherity
Advanced tools
[](https://discord.gg/EH6nSts)
Featherity is a fork of Feather Icons, with icons sourced by the community.
npm install featherity
#or
yarn add featherity
<!-- Development version -->
<script src="https://unpkg.com/featherity@latest/dist/umd/featherity.js"></script>
<!-- Production version -->
<script src="https://unpkg.com/featherity@latest"></script>
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.
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>
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,
},
});
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.
});
import { createIcons, Menu, ArrowRight, Globe } from 'featherity';
createIcons({
icons: {
Menu,
ArrowRight,
Globe,
},
});
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);
You can use the components from this Figma file.
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!
Feather is licensed under the ISC License.
FAQs
[](https://discord.gg/EH6nSts)
The npm package featherity receives a total of 1 weekly downloads. As such, featherity popularity was classified as not popular.
We found that featherity demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
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.
Research
Security News
Socket researchers uncover the risks of a malicious Python package targeting Discord developers.
Security News
The UK is proposing a bold ban on ransomware payments by public entities to disrupt cybercrime, protect critical services, and lead global cybersecurity efforts.
Security News
Snyk's use of malicious npm packages for research raises ethical concerns, highlighting risks in public deployment, data exfiltration, and unauthorized testing.