aykutkardas / react-icomoon Goto Github PK
View Code? Open in Web Editor NEWIt makes it very simple to use SVG icons in your React and React-Native projects.
Home Page: https://svgps.app
License: MIT License
It makes it very simple to use SVG icons in your React and React-Native projects.
Home Page: https://svgps.app
License: MIT License
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
Edit: Sorry, I opened issue on the wrong repository
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
Hi,
Currently when building the project it includes the entire icons.json.
Any idea if is possible to include just the used icons?
Hello, is this package compatible with react native?
I cannot get it work.
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>
);
}
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.
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}`;
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?
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!
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"
},
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.
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!
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?
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"
Is it possible using this lib add new icons?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.