It makes it very simple to use SVG icons in your Preact projects.
npm install preact-icomoon
yarn add preact-icomoon
You can try svgps.app to generate selection.json file. 🎉
You can use the icons you selected on IcoMoon by downloading the selection.json file.
// Icon.jsx
import IcoMoon from "preact-icomoon";
import iconSet from "./selection.json";
const Icon = (props) => <IcoMoon iconSet={iconSet} {...props} />;
export default Icon;// Icon.tsx
import IcoMoon, { IconProps } from "preact-icomoon";
import iconSet from "./selection.json";
const Icon = (props: IconProps) => <IcoMoon iconSet={iconSet} {...props} />;
export default Icon;import Icon from "./Icon";
<Icon icon="pencil" size={20} color="orange" />;| Name | Type | Default | Sample |
|---|---|---|---|
| iconSet | Object | - | "selection.json file content" |
| icon | String | - | "home" |
| size | Number,String | - | "1em", 10, "100px" |
| color | String | - | "red", "#f00", "rgb(0,0,0)" |
| style | Object | {...} | { color: '#ff0'} |
| title | String | - | "Icon Title" |
| className | String | - | "icomoon" |
| disableFill | Boolean | - | true |
| removeInlineStyle | Boolean | - | true |
{
display: "inline-block",
stroke: "currentColor",
fill: "currentColor",
}You can use the iconList method to see a complete list of icons you can use.
import IcoMoon, { iconList } from "preact-icomoon";
iconList(iconSet);
// sample output
[
"document",
"camera",
"genius",
"chat",
"heart1",
"alarmclock",
"star-full",
"heart",
"play3",
"pause2",
"bin1",
];