logo

Get Started

The @aracna/icons-feather packages provides all the icons from Feather as raw SVG strings.

npm install @aracna/icons-feather
npmyarnpnpm

The name syntax of the exported raw SVG strings is ICON_F_<NAME> where <NAME> is the name of the icon in upper snake case.

import { ICON_F_FEATHER } from '@aracna/icons-feather/assets/feather';

// will log the SVG string of the "feather" icon
console.log(ICON_F_FEATHER);

Use on the web

The @aracna/icons-feather-web packages provides all the icons from Feather as web components.

npm install @aracna/icons-feather-web
npmyarnpnpm

The name syntax of the exported web components is icon-feather-<name> where <name> is the name of the icon in kebab case.

import '@aracna/icons-feather-web/elements/feather';

const root = document.getElementById('root');
const feather = document.createElement('icon-feather-feather');

root.append(feather);

Use in React

The @aracna/icons-feather-react packages provides all the icons from Feather as React components.

npm install @aracna/icons-feather-react
npmyarnpnpm

The name syntax of the exported React components is IconFeather<Name> where <Name> is the name of the icon in pascal case.

import React from 'react';
import { IconFeatherFeather } from '@aracna/icons-feather-react/components/feather';

export function App() {
  return <IconFeatherFeather />;
}