jrgarciadev / react-iconly Goto Github PK
View Code? Open in Web Editor NEW๐ React component for Iconly icons
Home Page: https://react-iconly.jrgarciadev.com/
License: MIT License
๐ React component for Iconly icons
Home Page: https://react-iconly.jrgarciadev.com/
License: MIT License
Hello,
I build website apps using typescript and nextjs, for the icons i use react-iconly.
There is an issue when i imported "IconlyProvider" and getting eslint error check "Module '"react-iconly"' has no exported member 'IconlyProvider'.ts(2305)". However, the icon work well in browser as i config it using IconlyProvider in my pages apps
Iconly is a set of 500 icons (100 icons in 5 different styles). However, if you count the number of icons here:
https://react-iconly.jrgarciadev.com/
You'll see 101 icons. One icon seems to be extra.
Also, if you see the official list here, you'll see the below icon which isn't listed on react-iconly page:
I think there are inconsistencies between the actual icon set and react-iconly, which is something quite important to fix.
I guess we should go through the icons one by one, to ensure there's no inconsistency between the two.
The build process currently just bundles all of the code on a single index.js
file, which is very inefficient when considering bundle-size. As an example, my application is about 1200kB (unzipped) in size, of which 500kB is from react-iconly
.
I have very little knowledge about bundlers, so I have no idea what would be best way to go about doing this, but my educated guess is that using a different bundler (or maybe even just different options) would be enough.
My workaround was publishing a package with the whole source code (with some modifications made after my build process failed), and letting my bundler (my project is built with vite
) do the dirty work.
After doing this, my bundle-size shrunk to about 800kB.
Hopefully something can be properly done about this in the near future.
Hello, when i use iconly i have a blank page and i don't know why. Furthermore when i use npm to install there is some error. How i can fix this ?
Thanks for your help ๐
2023-03-20T04:36:06.377Z
While resolving: [email protected]
Found: [email protected]
node_modules/react
react@"18.2.0" from the root project
Could not resolve dependency:
peer react@"^16.8.6 || ^17" from [email protected]
node_modules/react-iconly
react-iconly@"*" from the root project
Fix the upstream dependency conflict, or retry
this command with --force, or --legacy-peer-deps
to accept an incorrect (and potentially broken) dependency resolution.
Raw JSON explanation object:
{
"code": "ERESOLVE",
"current": {
"name": "react",
"version": "18.2.0",
"whileInstalling": {
"name": "appjs",
"version": "0.1.0",
"path": "C:\Users\username\Desktop\appjs"
},
"location": "node_modules/react",
"isWorkspace": false,
"dependents": [
{
"type": "prod",
"name": "react",
"spec": "18.2.0",
"from": {
"location": "C:\Users\username\Desktop\appjs"
}
}
]
},
"currentEdge": {
"type": "prod",
"name": "react",
"spec": "18.2.0",
"from": {
"location": "C:\Users\username\Desktop\appjs"
}
},
"edge": {
"type": "peer",
"name": "react",
"spec": "^16.8.6 || ^17",
"error": "INVALID",
"from": {
"name": "react-iconly",
"version": "2.2.5",
"whileInstalling": {
"name": "appjs",
"version": "0.1.0",
"path": "C:\Users\username\Desktop\appjs"
},
"location": "node_modules/react-iconly",
"isWorkspace": false,
"dependents": [
{
"type": "prod",
"name": "react-iconly",
"spec": "*",
"from": {
"location": "C:\Users\username\Desktop\appjs"
}
}
]
}
},
"strictPeerDeps": false,
"force": false
}
Hey @jrgarciadev, I know you must be incredibly busy! I'm wondering if you could add the Dark/Light mode icons or point us to how we can manufacture our own icons using this great styling.
Thanks a lot for all you do for the community. You're a beast!
You icons are fantastics, no idea if you plan and expanding the current set but some icons that would be great to add:
This is very self serving obviously but you're icons are so good I figured I'd ask :)
K I am done!
Great work!
Hello, thanks for your package
I wanted to user this package as icon provider, but I am getting this error with Vite:
Uncaught ReferenceError: process is not defined
s2 factoryWithTypeCheckers.js:170
i2 factoryWithTypeCheckers.js:241
exports factoryWithTypeCheckers.js:116
Q index.js:9
u context.js:34
<anonymous> factoryWithThrowingShims.js:16
Why?
I also want to ask for Plug
and List
ย icons.
Thanks
Hi Junior!
Thanks for your amazing work. I'm a co-founder in Piqo, and we're launching a presentation website/landing page for Iconly.
I used your package to showcase the icons, just like the way you did on https://react-iconly.jrgarciadev.com/.
However, I suppose there's a better way to use Iconly in the project. Currently, you have to do something like this:
import { Search } from 'react-iconly'
I'm wondering if we could do like this:
import Iconly from 'react-iconly'
const MyComponent = () => {
return (
<Iconly name="search" set="light" />
)
}
Or a combination of default & named exports:
import Iconly, { Search } from 'react-iconly';
I decided to do it my self in my forked version of react-iconly here https://github.com/hiradary/react-iconly/blob/main/src/index.js, but I ran into some problems regarding building & using it in my project.
Also I thought It'd be better if you could implement this, so others could also benefit.
I imported iconly files from figma and I found an icon named two document there but the icon is nowhere to be found in React Iconly package. Kindly add that Icon to package.
<svg width="29" height="27" viewBox="0 0 29 27" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M9.49838 1C9.49838 1 4.1322 1.00529 4.12381 1.00529C2.19458 1.02776 1 3.42871 1 7.09095V19.2491C1 22.9298 2.20367 25.34 4.14967 25.34C4.14967 25.34 9.51516 25.336 9.52424 25.336C11.4535 25.3136 12.6488 22.9113 12.6488 19.2491V7.09095C12.6488 3.4102 11.4444 1 9.49838 1Z" stroke="#2DE4E0" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path opacity="0.4" d="M3.41406 6.30872C3.41406 5.34222 4.19756 4.55872 5.16406 4.55872H8.4846C9.4511 4.55872 10.2346 5.34222 10.2346 6.30872V6.92564C10.2346 7.89214 9.4511 8.67564 8.4846 8.67564H5.16406C4.19756 8.67564 3.41406 7.89214 3.41406 6.92564V6.30872Z" stroke="#2DE4E0" stroke-width="1.5"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M24.4671 1C24.4671 1 19.1003 1.00529 19.0919 1.00529C17.1625 1.02776 15.9678 3.42871 15.9678 7.09095V19.2491C15.9678 22.9298 17.1716 25.34 19.1178 25.34C19.1178 25.34 24.4838 25.336 24.4929 25.336C26.4224 25.3136 27.6178 22.9113 27.6178 19.2491V7.09095C27.6178 3.4102 26.4133 1 24.4671 1Z" stroke="#2DE4E0" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path opacity="0.4" d="M18.3818 6.30872C18.3818 5.34222 19.1653 4.55872 20.1318 4.55872H23.4533C24.4198 4.55872 25.2033 5.34222 25.2033 6.30872V6.92564C25.2033 7.89214 24.4198 8.67564 23.4533 8.67564H20.1318C19.1653 8.67564 18.3818 7.89214 18.3818 6.92564V6.30872Z" stroke="#2DE4E0" stroke-width="1.5"/> </svg>
When loading the page, the icon loader flashes before displaying the icon grid.
Proper UX is to delay spinners from immediately showing, to improve "fast" loading causing flashing.
I think we can add Typescript types or move the project to use Typescript.
If you're interested in it, I can do it today @jrgarciadev. I'm using this lib on a project I'm working on.
Thanks for this repo! I see that there is already a Play icon, could we also get the other media icons?
Hey Junior!
I'm getting this in v1.1.0
. It seems to be produced due to this commit: 333f30e
My dependencies:
"next": "10.0.3",
"react": "17.0.1",
"react-dom": "17.0.1",
"react-iconly": "^1.1.0",
Steps to reproduce:
Setup a project with the above dependencies.
I am trying to search an icon on the website. I can search a word with algolia, but noting is displayed then
Thanks for your excellent work, please add humanitarian icons sets
My React version is 17
Hi @jrgarciadev!
Piqo Design Team has recently updated the Iconly icon set and added 100 more icons. There's a new curved
style included in the new version.
You can find it here: https://gumroad.com/piqodesign
Please add these to the package.
Thanks โค๏ธ
The web site is gettin an error from algolia api:
{"message":"Operations quota exceeded. Change plan to get more Operations.","status":403}
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.