aykutkardas / react-icomoon Goto Github PK

View Code? Open in Web Editor NEW

216.0 6.0 22.0 751 KB

It makes it very simple to use SVG icons in your React and React-Native projects.

Home Page: https://svgps.app

License: MIT License

TypeScript 100.00%

icomoon icons svg icon react reactjs svg-icons react-native hacktoberfest

react-icomoon's Introduction

It makes it very simple to use SVG icons in your React and React-Native projects.

Cheatsheet - Interactive Demo - Buy Me a Coffee

Install

npm install react-icomoon

yarn add react-icomoon

Usage

You can use svgps.app to access over 40,000 free icons and convert your own icons into selection.json.

Or you can use IcoMoon to generate the selection.json file.

Declare

// Icon.jsx
import IcoMoon from "react-icomoon";
import iconSet from "./selection.json";

const Icon = (props) => <IcoMoon iconSet={iconSet} {...props} />;

export default Icon;

With TypeScript

// Icon.tsx
import IcoMoon, { IconProps } from "react-icomoon";
import iconSet from "./selection.json";

const Icon = (props: IconProps) => <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	-	"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

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",
];

React Native 🎉 • Demo

Step 1: Install Dependencies

npm install react-icomoon react-native-svg

yarn add react-icomoon react-native-svg

Step 2: Declare

Additional props for React Native

Name	Type	Default	Sample
native	Boolean	-	true
SvgComponent	React.Component	-	SvgComponent
PathComponent	React.Component	-	PathComponent

// Icon.jsx
import IcoMoon from "react-icomoon";
import { Svg, Path } from "react-native-svg";
import iconSet from "./selection.json";

const Icon = (props) => (
  <IcoMoon
    native
    SvgComponent={Svg}
    PathComponent={Path}
    iconSet={iconSet}
    {...props}
  />
);

export default Icon;

Step 3: Use

import Icon from "./Icon";

<Icon icon="pencil" size={20} color="orange" />;

react-icomoon's People

Contributors

Stargazers

Watchers

react-icomoon's Issues

Optional React-Native support will be added.

Reduce build size

Hi,
Currently when building the project it includes the entire icons.json.
Any idea if is possible to include just the used icons?

TypeError: item.properties is undefined

Hello,

It looks like the iconset JSON exported from the IcoMoon App (https://icomoon.io/app/#/select) is not providing a properties prop within its icon definitions any more.

Example of an icon definition taken from the JSON:

    {
      "paths": [
        "M320 192c0-106.039 85.961-192 192-192s192 85.961 192 192c0 106.039-85.961 192-192 192s-192-85.961-192-192zM768.078 448h-35.424l-199.104 404.244 74.45-372.244-96-96-96 96 74.45 372.244-199.102-404.244h-35.424c-127.924 0-127.924 85.986-127.924 192v320h768v-320c0-106.014 0-192-127.922-192z"
      ],
      "tags": [
        "user-tie",
        "user",
        "user-employee",
        "profile",
        "avatar",
        "person",
        "member",
        "job",
        "official"
      ],
      "defaultCode": 59766,
      "grid": 16
    },

So trying to render an icon using a icon prop throws an error due to the check here: https://github.com/aykutkardas/react-icomoon/blob/master/src/index.tsx#L60 since properties is undefined.

react-native support?

Hello, is this package compatible with react native?
I cannot get it work.

Add support of "title" attribute

It seams like title attribute do not support by browsers on <svg/> tags like they do for other tags.
Example for default usage:

<span title="I'm accessible tip">Some text</span>

Example for <svg/> tag from MDN:

<svg viewBox="0 0 20 10" xmlns="http://www.w3.org/2000/svg">
  <circle cx="5" cy="5" r="4">
    <title>I'm a circle</title>
  </circle>

  <rect x="11" y="1" width="8" height="8">
    <title>I'm a square</title>
  </rect>
</svg>

It would be grate if next code

<IcoMoon iconSet={iconSet} icon="MyIcon" title="My icon" />

would transforms into

<svg ... >
  <path ... >
    <title>My icon</title>
  </path>
</svg>

cos for now if I want browser tips on icons I must make a wrapper tag with title attribute on it

TypeScript type for `IconSetItem` breaks on v2.3.x

There is a faulty type declaration for IconSetItem which was introduced in #13.

aykutkardas/react-icomoon/src/index.tsx
node_modules/react-icomoon/dist/index.d.ts

declare type IconSetItem = {
    properties: {
        name: "string";
    };
    icon: {
        paths: [];
        attrs: [];
        width?: string;
    };
};

Relates to #9 and #13.

Icons have pixelation in Safari

Issues observed: icons have pixelation in Safari.

Is the issue on Desktop, Mobile, or Tablet?

Device used: Desktop & Mobile

Browser used and version: Safari

Steps to reproduce the issue (retrace steps of how you came across the issue):
Open the Interactive Demo in Safari and look at the icons, they look pixelated due to the library work.
https://codesandbox.io/s/react-icomoon-demo-13pce

Screenshot*:

RNWeb: The style props works only with Inline style

In RNWeb, The style property works only as an inline style. It didn't work if it's passed as an object from StyleSheet.create({})

Here is an expo link, switch to web tab and see the issue. working fine in iOS & Android

https://snack.expo.dev/@heykarthick/react-icomoon

import * as React from 'react';
import { View, StyleSheet } from 'react-native';

import Icon from './components/Icon';
const styles = StyleSheet.create({
  iconStyle: {
    color: 'red',
    margin: 20,
  },
});
export default function App() {
  return (
    <View>
      <Icon icon="pencil" size={100} style={styles.iconStyle} /> {/* didn't work */}
      <Icon icon="pencil" size={100} style={{ color: 'red', margin: 20 }} /> {/*Works*/}
    </View>
  );
}

Add new icons

Is it possible using this lib add new icons?

Uncaught TypeError: Cannot read properties of undefined (reading '0')

Hi,
I downloaded my selection.json and inserted it correctly in path, there is a "pencil" named icon in it.
So I used <Icon icon="pencil" size={20} color="orange" /> and got this:

index.tsx:82 Uncaught TypeError: Cannot read properties of undefined (reading '0')
    at index.tsx:82:1
    at Array.map (<anonymous>)
    at IcoMoon (index.tsx:81:1)
    at renderWithHooks (react-dom.development.js:14985:1)
    at mountIndeterminateComponent (react-dom.development.js:17811:1)
    at beginWork (react-dom.development.js:19049:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:1)
    at invokeGuardedCallback (react-dom.development.js:4056:1)
    at beginWork$1 (react-dom.development.js:23964:1)
    at performUnitOfWork (react-dom.development.js:22776:1)
    at workLoopSync (react-dom.development.js:22707:1)
    at renderRootSync (react-dom.development.js:22670:1)
    at performSyncWorkOnRoot (react-dom.development.js:22293:1)
    at react-dom.development.js:11327:1
    at unstable_runWithPriority (scheduler.development.js:468:1)
    at runWithPriority$1 (react-dom.development.js:11276:1)
    at flushSyncCallbackQueueImpl (react-dom.development.js:11322:1)
    at workLoop (scheduler.development.js:417:1)
    at flushWork (scheduler.development.js:390:1)

the above error occurred in the <IcoMoon> component:

    at IcoMoon (http://localhost:3000/static/js/2.chunk.js:16958:20)
    at Icon
    at form
    at ReactFinalForm (http://localhost:3000/static/js/3.chunk.js:1727:20)
    at div
    at http://localhost:3000/static/js/vendors~main.chunk.js:324789:73
    at Paper (http://localhost:3000/static/js/vendors~main.chunk.js:364808:86)
    at http://localhost:3000/static/js/vendors~main.chunk.js:324789:73
    at Card (http://localhost:3000/static/js/vendors~main.chunk.js:345325:86)
    at div
    at http://localhost:3000/static/js/vendors~main.chunk.js:324789:73
    at Grid (http://localhost:3000/static/js/vendors~main.chunk.js:353724:91)
    at div
    at http://localhost:3000/static/js/vendors~main.chunk.js:324789:73
    at Grid (http://localhost:3000/static/js/vendors~main.chunk.js:353724:91)
    at div
    at http://localhost:3000/static/js/vendors~main.chunk.js:324789:73
    at Container (http://localhost:3000/static/js/vendors~main.chunk.js:348606:86)
    at Datatable (http://localhost:3000/static/js/50.chunk.js:423:90)
    at Admin (http://localhost:3000/static/js/50.chunk.js:1787:52)
    at Suspense
    at B (http://localhost:3000/static/js/vendors~main.chunk.js:556649:10)
    at BaseLayout (http://localhost:3000/static/js/main.chunk.js:6268:5)
    at LocalizationProvider (http://localhost:3000/static/js/vendors~main.chunk.js:337110:5)
    at InnerThemeProvider (http://localhost:3000/static/js/vendors~main.chunk.js:397702:74)
    at ThemeProvider (http://localhost:3000/static/js/vendors~main.chunk.js:392324:5)
    at ThemeProvider (http://localhost:3000/static/js/vendors~main.chunk.js:397722:5)
    at StylesProvider (http://localhost:3000/static/js/vendors~main.chunk.js:394935:5)
    at ThemeProviderWrapper (http://localhost:3000/static/js/main.chunk.js:11166:92)
    at App (http://localhost:3000/static/js/main.chunk.js:124:85)
    at x (http://localhost:3000/static/js/vendors~main.chunk.js:556667:13)
    at w (http://localhost:3000/static/js/vendors~main.chunk.js:555238:13)
    at SidebarProvider (http://localhost:3000/static/js/main.chunk.js:1098:5)
    at r (http://localhost:3000/static/js/vendors~main.chunk.js:552458:19)

"react": "17.0.2",
"react-scripts": "4.0.3"

Update react peerDependencies version

Currently react version mentioned in package.json is "^16.4.1"

 "peerDependencies": {
    "react": "^16.4.1"
  },

and it causes error while installing package for react >=17.0.0 with npm. Not a big issue, but you must every time add flag --legacy-peer-deps

I suppose that it will work fine if change peer deps version to this

 "peerDependencies": {
    "react": ">=16.4.1 <18.0.0-0"
  },

using with nativewind

Is it possible to use react-icomoon with nativewind?
I have used it like this:

import { styled } from 'nativewind';
import * as React from 'react';
import type { IconProps } from 'react-icomoon';
import IcoMoon from 'react-icomoon';
import { Path, Svg } from 'react-native-svg';

import iconSet from './selection.json';

const SIcoMoon = styled(IcoMoon);
export type NTIconProps = IconProps & {
  className?: string;
};

export const Icon = ({ className, style, ...props }: NTIconProps) => {
  return (
    <SIcoMoon
      native
      SvgComponent={Svg}
      PathComponent={Path}
      iconSet={iconSet}
      size={20}
      style={style}
      className={className}
      {...props}
    />
  );
};

but neither class nor style works for react-icomoon. I have used nativewind with react native built-in components and also other components like fast image and it's working but not with react-icomoon.

Version 2.0.5 does not contain dist folder

Since version 2.0.5, there is no dist in the package.

No problem with version 2.0.4

Fix static height value of viewBox

https://github.com/aykutkardas/react-icomoon/blob/master/src/index.tsx#L66

Current:

 props.viewBox = `0 0 ${width} 1024`;

Expected:

 props.viewBox = `0 0 ${width} ${width}`;

Update for React v18

The latest version supported by package.json is v17
Other libs are likely due for an update, too.
Community recommendations for checking security of software supply chain are welcome!

Missing xmlns attribute when downloading a new SVG file

Edit: Sorry, I opened issue on the wrong repository

Add types for typescript

It's always nice to have type information and it would be great to have type information for this awesome package.

I'm thinking to create @types/react-icomoon or maybe even better to just re-write this project (well, single js file) to TypeScript. Then users will know props just from autocompletion for example.

What do you think?

How to set iconSet programmatically

Thanks for this awesome package!! I have a different folder structure and I want to set iconSet programmatically. Is there a way to do it?

Rendering issue within a <Text> wrapper

Hi,

I have the following code:

 <Text>
    <Icon icon={IconFonts.SOMEICON} style={quote} size={10} marginLeft={10}/>
    <Text style={myStyle}>{someText}</Text>
    <Icon icon={IconFonts.ANOTHERICON} style={quote} size={10} marginRight={10}/>
</Text>

The icons are styled quotation marks, that are expected to be in the sentence, around the inner text.

However it doesn't render correctly. If I comment out the icons, the inner text shows. If I comment out the inner Text, the icons show.

If I comment out the outer wrapper Text, both the icons and text show, but they are inline, as views, and not inline as expected in a sentence.

It seems to me that somehow the Icons are not being treated as Text. Is there are way to make this work?

Thanks!