aykutkardas / React Icomoon
Licence: mit
It allows you to simply view the icons in the selection.json file provided by Icomoon.
Stars: ✭ 48
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to React Icomoon
Tabler Icons
A set of over 1400 free MIT-licensed high-quality SVG icons for you to use in your web projects.
Stars: ✭ 10,858 (+22520.83%)
Mutual labels: svg, icons, svg-icons, icon
Icons
The premium icon font for @uiwjs Component Library. https://uiwjs.github.io/icons
Stars: ✭ 99 (+106.25%)
Mutual labels: svg, icons, icon, svg-icons
Vectorlogozone
3,000+ gorgeous SVG logos, perfect for your README or credits page
Stars: ✭ 239 (+397.92%)
Mutual labels: svg, icons, svg-icons
Browser Logos
🗂 High resolution web browser logos
Stars: ✭ 5,538 (+11437.5%)
Mutual labels: svg, icons, svg-icons
Icons
All SVG icons available on http://game-icons.net
Stars: ✭ 598 (+1145.83%)
Mutual labels: svg, icons, svg-icons
Feathericon
simply generic vector icon collection - including sketch file, svg files, and font files.
Stars: ✭ 178 (+270.83%)
Mutual labels: svg, icons, svg-icons
Bytesize Icons
Tiny style-controlled SVG iconset (101 icons, 12kb)
Stars: ✭ 3,662 (+7529.17%)
Mutual labels: svg, icons, svg-icons
Svelte Awesome
Awesome SVG icon component for Svelte JS, built with Font Awesome icons. Based on Justineo/vue-awesome
Stars: ✭ 193 (+302.08%)
Mutual labels: svg, icons, icon
Vue Eva Icons
Is a pack of more than 480 beautiful open source Eva icons as Vue components
Stars: ✭ 189 (+293.75%)
Mutual labels: svg, icons, svg-icons
React Kawaii
Cute SVG React Components
Stars: ✭ 2,709 (+5543.75%)
Mutual labels: svg, icons, svg-icons
Akar Icons
A perfectly rounded icon library made for designers, developers, and pretty much everyone.
Stars: ✭ 184 (+283.33%)
Mutual labels: svg, icon, svg-icons
Grayshift
A lightweight front-end component library for developing fast and powerful web interfaces.
Stars: ✭ 304 (+533.33%)
Mutual labels: svg, icons, svg-icons
Evil Icons
Simple and clean SVG icon pack with the code to support Rails, Sprockets, Node.js, Gulp, Grunt and CDN
Stars: ✭ 4,944 (+10200%)
Mutual labels: svg, icons, svg-icons
Materialdesign Svg
@mdi/svg Dist for Material Design Icons.
Stars: ✭ 166 (+245.83%)
Mutual labels: svg, icons, svg-icons
File Icon Vectors
A collection of file type icons in SVG format
Stars: ✭ 171 (+256.25%)
Mutual labels: svg, icons, svg-icons
React-IcoMoon
📦 Zero Dependencies
With React-Icomoon you can easily use the icons you have selected or created in icomoon.
Demo
Install
npm install react-icomoon
Usage
You can use the icons you selected on IcoMoon by downloading the selection.json
file.
Declare
// icon.js
import React from "react";
import IcoMoon from "react-icomoon";
const iconSet = require("./selection.json");
const Icon = ({ ...props }) => {
return <IcoMoon iconSet={iconSet} {...props} />;
};
export default Icon;
Use
import Icon from "./icon";
<Icon icon="pencil" size={20} color="orange" />;
Props List
Name | Type | Default | Sample |
---|---|---|---|
iconSet | Object | undefined | "selection.json file content" |
icon | String | undefined | "home" |
size | Number,String | undefined | "1em", 10, "100px" |
color | String | undefined | "red", "#f00", "rgb(0,0,0)" |
style | Object | {...} | { color: '#ff0'} |
className | String | undefined | "icomoon" |
disableFill | Boolean | undefined | true |
removeInlineStyle | Boolean | undefined | true |
Default Style
{
display: "inline-block",
stroke: "currentColor",
fill: "currentColor",
}
iconList
You can use the iconList method to see a complete list of icons you can use.
import IcoMoon, { iconList } from "react-icomoon";
iconList(iconSet);
// sample output
[
"document",
"camera",
"genius",
"chat",
"heart1",
"alarmclock",
"star-full",
"heart",
"play3",
"pause2",
"bin1",
];
Demo
React Native 🎉 •Step 1: Install Dependencies
npm install react-icomoon react-native-svg
Step 2: Declare
// icon.js
import React from "react";
import IcoMoon from "react-icomoon";
import { Svg, Path } from "react-native-svg";
const iconSet = require("./selection.json");
const Icon = ({ ...props }) => {
return (
<IcoMoon
native
iconSet={iconSet}
SvgComponent={Svg}
PathComponent={Path}
{...props}
/>
);
};
export default Icon;
Step 3: Usage
import Icon from "./icon";
<Icon icon="pencil" size={20} color="orange" />;
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].