techwithmanuel / untitledui-js

✨ Simple, Customizable SVG icons sourced from untitled UI with support for Framer motion for your React applications

Languages & Tools

untitledui-js's Issues

Color Change

How can I change the color of the icons?

I tried using fill but it doesn't change the stroke color

Please add HomeLine icon

missing icon:

default color should be "currentColor"

untitledui-js/src/template.tsx

Line 38 in c12c67d

fill={fill ? fill : "none"}

both fill and stroke should be set to "currentColor" so it inherit it's color from the parent.

ESM Support and Tree-Shaking

When bundling this package with an app, tree-shaking is not occurring causing the index file to be inflated due to the import being commonJS, what should be happening is that only the icons that I want to use will be bundled without importing the entire icon set.

Reproduce

1. Create a simple project, I used Vite
2. Install package npm i -D untitledui-js-base
3. Place 1 icon anywhere in App.tsx
4. Run npm run build

Notice how the index file is quite large.

vite v5.2.11 building for production...
✓ 35 modules transformed.
dist/index.html                   0.46 kB │ gzip:   0.30 kB
dist/assets/react-CHdo91hT.svg    4.13 kB │ gzip:   2.05 kB
dist/assets/index-DiwrgTda.css    1.39 kB │ gzip:   0.72 kB
dist/assets/index-B8foZgZW.js   912.34 kB │ gzip: 213.54 kB

(!) Some chunks are larger than 500 kB after minification. Consider:
- Using dynamic import() to code-split the application
- Use build.rollupOptions.output.manualChunks to improve chunking: https://rollupjs.org/configuration-options/#output-manualchunks
- Adjust chunk size limit for this warning via build.chunkSizeWarningLimit.
✓ built in 1.02s

Usage on older React versions

Hello,

I would like to use this lib with React 16.x. Is it possible to achieve this ?

Cloned and tried to make a build with another React version as dependency but webpack gives errors in bulk

Can't render Icons using React SSR

Hello! 🙂

I have a basic Next.js project and tried to use this icon pack. Unfortunately, this breaks Next's SSR as the components returned from this library contain client-side only code using e.g. useEffect.

There's a section for package developers within the Next.js docs.
https://nextjs.org/docs/getting-started/react-essentials#third-party-packages

To make it work it's probably sufficient to just use the "use client" directive on your end.

But in my humble opinion, I think importing SVGs from this package into a project using SSR should be supported in general.

Cannot use Icons under "Editor" category

Licence question

Hi, can I use this npm in a SaaS platform that we are building and selling?

Framer Motion peer dependency

This library lists Framer Motion as a dependency in package.json.
Framer Motion is a giant library bundle-size-wise, and you don't want to bake it in the build.
Instead, it should be listed as a peer dependency and excluded from the bundle.

VolumeX icon

VolumeX icon is the same as VolumePlus.

Category import not supported anymore?

until now I was using untitledui-js library importing categories which i found very convenient.
with the new version 2.1.16 my app crushes because I am just allowed to have individual imports which is cumbersome and now even when I want to go back to previous version idk why I receive error on individual imports instead that I didn't use to have before.
is it going to be fixed or this is going to be the new approach?

Development Section Icon

Hi guys, thanks to response my previous issues.

You may forget this section and please update the package on NPM 🙂