Formed in 2009, the Archive Team (not to be confused with the archive.org Archive-It Team) is a rogue archivist collective dedicated to saving copies of rapidly dying or deleted websites for the sake of history and digital heritage. The group is 100% composed of volunteers and interested parties, and has expanded into a large amount of related projects for saving online and digital history.
icomoon-react
React Component which let you use icomoon selection.json file to render SVG instead font
Short example can be found here
installation with YARN:
yarn add icomoon-react
installation with NPM:
npm install icomoon-react
Quick usage:
use selection.json generated from http://icomoon.io/app
- add your desired icons, select from ready library or add custom svg's
- once done click Generate Font
- click Download
- unzip package and grab your
selection.json
import iconSet from "somewhere/selection.json";
import IcomoonReact, { iconList } from "icomoon-react";than just use component in code:
<IcomoonReact iconSet={iconSet} color="#444" size={100} icon="shower" />To console.log all icons use: iconList(iconSet) function
Advanced usage:
To not include set all over again just create your wraper component:
Icon.tsx
import React from "react";
import IcomoonReact from "../IcomoonReact";
import iconSet from "./pathToSelection/selection.json";
const Icon: React.FC<{
color?: string,
size: string | number,
icon: string,
className?: string
}> = props => {
const { color, size = "100%", icon, className = "" } = props;
return (
<IcomoonReact
className={className}
iconSet={iconSet}
color={color}
size={size}
icon={icon}
/>
);
};
export default Icon;App.tsx
import React from "react";
import Icon from "./Icon";
const App = () => (
<div>
<Icon color="#444" size={100} icon="star" />
</div>
);
export default App;Develop
clone repo git clone git@github.com:ponciusz/icomoon-react.git
yarn install
yarn start
