Get Started

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

npm install @aracna-icons/feather

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';

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

Use on the web

The @aracna/web-components packages provides the aracna-icon web component that can render these icons.

npm install @aracna/web-components

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/web-components/elements/icon-element';

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

icon.size = 16;

root.append(icon);

Use in React

The @aracna/react-components packages provides the AracnaIcon component that can render these icons.

npm install @aracna/react-components

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 { Icon } from '@aracna/react-components/components/data/icon';
import { ICON_F_FEATHER } from '@aracna-icons/feather';

export function App() {
  return <Icon size={16} src={ICON_F_FEATHER} />;
}