steeze-ui/icons

Effortless Icon Packs & Components for Svelte, React, Vue and more..

icons's Issues

Request: Replace Feather Icons with Lucide Icons

It appears as though Feather is dead and the community has moved to Lucide. Per Lucide,

Community-run fork of Feather Icons, open for anyone to contribute icons.

It began after growing disaffection with the Feather Icons project moderation. With over 300+ open issues and over 100+ open PRs, the Feather Icons project has been abandoned. This unfortunately means that hundreds of developers and designers wasted their time contributing to Feather Icons with no chance of PRs being accepted.

Lucide is trying to expand the icon set as much as possible while staying faithful to the original simplistic design language. We do this as a community of devs and designers and hope that you'll join us!

Why choose Lucide over Feather Icons

• More icons to work with: Lucide already has hundreds of icons more than Feather does.
• Official librairies and integrations with popular frameworks and design tools.
• Well maintained code base.
• Active community, regularly growing and improving the set.

It would be lovely to replace the Feather icon pack in Steeze with the Lucide version.

Export IconSource

I must say it's a great library!
Could you export the IconSource type to use in our components?

Add support for Svelte 4

It was just released

Implement steeze-ui/carbon-icons

It's planned but I see no activity. Can I help in some way?

Update HeroIcons

HeroIcons released a new theme 'micro' so that should be added to. Happy to contribute a PR with these updates: https://heroicons.com/micro

@steeze-ui/remix-icons 1.1.0 Not compatible with Svelte 4.0.0

Unknown file extension ".svelte"

Hi! Using Svelte 3.44.0 (with SvelteKit and TypeScript), tried to use this library I have successfully used in the past but it keeps failing with the following error (looks like a duplicate of #14 but I manage to reproduce it over and over):

Unknown file extension ".svelte" for /home/dreamscached/.../project/node_modules/@steeze-ui/svelte-icon/Icon.svelte
TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".svelte" for /home/dreamscached/.../project/node_modules/@steeze-ui/svelte-icon/Icon.svelte
    at new NodeError (node:internal/errors:372:5)
    at Object.getFileProtocolModuleFormat [as file:] (node:internal/modules/esm/get_format:76:11)
    at defaultGetFormat (node:internal/modules/esm/get_format:118:38)
    at defaultLoad (node:internal/modules/esm/load:21:20)
    at ESMLoader.load (node:internal/modules/esm/loader:407:26)
    at ESMLoader.moduleProvider (node:internal/modules/esm/loader:326:22)
    at new ModuleJob (node:internal/modules/esm/module_job:66:26)
    at ESMLoader.#createModuleJob (node:internal/modules/esm/loader:345:17)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:304:34)
    at async ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:82:21)

Basically:

1. Create a new SvelteKit project with npm create svelte@latest
2. Pick TypeScript syntax when asked
3. Install this library with npm i -D @steeze-ui/icons
4. Use it in any .svelte file:

   <script lang="ts">
      import { Icon } from "@steeze-ui/svelte-icon"
      import { Sun } from "@steeze-ui/heroicons"
   </script>
   
   <div class="w-screen">
      <div class="flex flex-row-reverse w-full">
    	  <button class="rounded-full">
    		  <Icon src="{Sun}" theme="solid" class="color-gray-900" />
    	  </button>
      </div>
   </div>

[Request] Add Google Material Symbol Icon Set

I'd do it myself, but I can't seem to understand how exactly can I add a new builder. When I install the dependencies of the monoreop with pnpm, I can't run the template builder sveltekit app - perhaps I'm missing some steps?

"Material Icons / Material Symbols

These are two different official icon sets from Google, using the same underlying designs. Material Icons is the classic set, while Material Symbols was introduced in April 2022, built on variable font technology."

Sources:
https://github.com/google/material-design-icons
https://fonts.google.com/icons

Update version of Phosphor Icons 2.1

I think the Phosphor icon pack could be updated to v ^2.1 https://github.com/steeze-ui/icons/blob/main/packages/builders/phosphor-icons/package.json#L33.

Thanks 🙏🏻

Sveltekit - Vite is unable to see the modules exposed by @steeze-ui/heroicons

Made an attempt to migrate our Sveltekit project from svelte-hero-icons

Installed @steeze-ui/svelte-icon and @steeze-ui/heroicons, followed the instructions and got
(I tried with deps in devDependencies and dependencies)

Uncaught (in promise) SyntaxError: The requested module '/node_modules/.vite/deps/@steeze-ui_heroicons.js?v=4ed4dd65' does not provide an export named 'Logout' (at index.svelte? [sm]:6:12)

Better handling of invalid theme names

Given the following Svelte component:

<script>
  import { Icon } from '@steeze-ui/svelte-icon';
  import { UserCircle } from '@steeze-ui/heroicons';
</script>

<Icon src={UserCircle} class="color-red" size="24" />
<Icon src={UserCircle} class="color-green" size="24" theme="solid" />
<Icon src={UserCircle} class="color-blue" size="24" theme="outline" />

The red and green icons are output. But blue icon is not. My expectation would be for the blue icon to output using the default theme. Alternatively, warn the user.

Conflicts in Svelte resolve

The terminal outputs this warning when the @steeze-ui/[email protected] package is installed:

[vite-plugin-svelte] WARNING: The following packages use a svelte resolve configuration in package.json that has conflicting results and is going to cause problems future.

@steeze-ui/[email protected]

Please see https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/faq.md#conflicts-in-svelte-resolve for details.

Module '"@steeze-ui/svelte-icon"' has no exported member 'Icon'.

I think the Icon needs to be added to the index.d.ts in order to fix this issue for svelte with typescript.

Add Credit Card icons library

Happy to contribute this PR if there's interest: https://github.com/aaronfagan/svg-credit-card-payment-icons

Can't import icons using solidjs start

Hey! I'm having trouble importing the icons in my solidjs projects.

Steps to reproduce:

yarn create solid # then y to everything
yarn add @steeze-ui/heroicons
yarn add -D @steeze-ui/solid-icon

Then import the icons as such in index.tsx

import { Icon } from "@steeze-ui/solid-icon";
import { Eye } from "@steeze-ui/heroicons";

import { Title } from "solid-start";
import Counter from "~/components/Counter";

export default function Home() {
  return (
    <main>
      <Title>Hello World</Title>
      <h1 class="text-3xl font-bold underline">Hello world!</h1>
      <Counter />
      <p>
        Visit{" "}
        <a href="https://start.solidjs.com" target="_blank">
          start.solidjs.com
        </a>{" "}
        to learn how to build SolidStart apps.
      </p>
      <Icon src={Eye} theme="solid" class="color-gray-900" />
    </main>
  );
}

And I receive this error when running yarn dev:

@steeze-ui/solid-icon doesn't appear to be written in CJS, but also doesn't appear to be a valid ES module (i.e. it doesn't have "type": "module" or an .mjs extension for the entry point). Please contact the package author to fix.
(node:2004606) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.

I'd appreciate some help getting it to work though, thank you!

Sveltekit Issue

I'm only after the icons, not the components. I install like....

pnpm i @steeze-ui/svelte-icon

dependencies:
+ @steeze-ui/svelte-icon 1.5.0

devDependencies:
+ @steeze-ui/components 1.2.0

 WARN  Issues with peer dependencies found
.
└─┬ @steeze-ui/components 1.2.0
  └── ✕ unmet peer svelte@">= ^3.46.3": found 4.2.0

Looks like they are in node_modules though.

I tried using this package, but got the following error "Missing "./index.js export in "@steeze-ui/heroicons" package"

Build failed with 1 error:
node_modules/vite/dist/node/chunks/dep-0351185a.js:29941:7: error: [plugin: vite:dep-scan] Missing "./index.js" export in "@steeze-ui/heroicons" package

Unknown file extension ".svelte" for /data/data/com.termux/files/home/leap-website-sveltekit/node_modules/@steeze-ui/svelte-icon/Icon.svelte

New version cadence?

Noticed the packages have fallen behind the source icon versions. Is there an automated process for building and publishing new versions?

Click Handler

I'm new to Svelte but I couldn't see a way to add a click handler onto the icon.

<Icon on:click={} />

Didn't seem to work.

@steeze-ui/vue-icon - planned

I am huge fan of your work!

This is showing planned. We have to use VueJs for our new project.

Any ideas if we can use @steeze-ui/vue-icon in our project.

Update version of Phosphor icons

I think the Phosphor icon pack could be updated to v ^2.0.2 https://github.com/steeze-ui/icons/blob/main/packages/builders/phosphor-icons/package.json#L33.

Adding internal padding changes the size of the icon

Filing this issue because I want to call some unexpected behavior. We're using tailwind and @steeze-ui/svelte-icon in a sveltekit app.

When adding the padding tailwind classes, the icon size changes.

So <Icon class="w-6 h-6 pr-2" /> creates an icon with properties <Icon class="w-4 h-4 mr-2" />

Maybe it's WAI because we want the icon size to be constant, because technically w-6 h-6 pr-2 would have a width of w-8, but I wanted to file this issue because it does not behave like other libraries we use.

Icon names are difficult to discover

The names used by Steeze UI are not consistent with the names of the underlying icon packs.

This is not an issue, but it seems hard to find what the actual names are.

For example, in SimpleIcons, there is an npm logo named npm and in Steeze UI this is called Npm (note capitalization).

Is there a good way to discover these names? Or perhaps a pattern that Steeze UI uses that can be documented?

Action

Would be great to have the latest updates of the icon packs, some (especially lucide) are quite outdated at this point. Perhaps even making an Actions job to do this automatically?

Adding svelte animation with transition:draw

Is it possible to use svelte's transition:draw with the Icon component? If so, how would you recommend going about it?

I tried looking through the source code, but still can't really figure out how to inject transition:draw into the path element. Thank you!

icon filled

hi there, Tabler icons come with a filled version too. Are these available via steeze-ui/icons?

Can't change material design icon color in Svelte

<script>
  import { Icon } from "@steeze-ui/svelte-icon"
  import { ArrowOutward } from "@steeze-ui/material-design-icons"
  import { Javascript } from "@steeze-ui/simple-icons"
</script>

<section>
  <Icon src={Javascript} class="w-6 text-red-500" />
  <Icon src={ArrowOutward} class="w-6 text-red-500" />
</section>

Hello! I can't change color of ArrowOutward icon with "text-red-500" class, but I can change color of Javascript icon by using the "text-red-500" class. 

NPM packages out of date

As mentioned in #49, a step to publish the packages to NPM should be added. Something which only the maintainer of the NPM packages can do.

Icons not displaying without text inside a reference

When putting an icon inside an <a> tag, it will not be displayed, while doing the same with an svg for instance works. For it to be initially displayed, you need to add text inside it.

Implement remix icons pack

Hello! a while ago I've created a package called svelte-remix-icons , inspired by svelte-hero-icons.

I was wondering if it is possible to implement the remix icons pack into this project so everyone can directly use this package.

tool to convert arbitrary svg to IconSource json

Do you already have a convenient way to take an svg and convert it into the IconThemeSource format that is ready to be used with the Icon component?

MIT License?

Hi there, the package.json file indicates that the license for this package is supposed to be MIT.

Is this correct, and if so, could you perhaps make it explicit by adding a license to the repository so we know where copyright should be attributed.

Update to remix-icons v4

Remix had a new version release recently. Would it be possible to update to v4?

css.gg Icon Set

https://css.gg

It is a small yet wonderful icon set.

Is it possible to add it to the system?

Build fails locally under node 17 pnpm 6

Pulled down repo and followed instructions in README:

pnpm install && pnpm package

I see two warnings on the install which I ignored. The package command, however fails with:

Scope: 10 of 11 workspace projects
packages/builders/octicons-builder package$ pnpm build:icons && svelte-kit package
│ > @steeze-ui/[email protected] build:icons /home/vhs/Developer/icons/packages/builders/octicons-builder
│ > node --loader ts-node/esm build.ts
│ (node:75521) ExperimentalWarning: --experimental-loader is an experimental feature. This feature could change at any time
│ (Use `node --trace-warnings ...` to show where the warning was created)
│ /home/vhs/Developer/icons/node_modules/.pnpm/[email protected]_cb9fa2b677905e47db2aeff929cdeb55/node_modules/ts-node/dist-raw/node-esm-resolve-implementatio
│     throw new ERR_MODULE_NOT_FOUND(
│           ^
│ CustomError: Cannot find module '/home/vhs/Developer/icons/packages/builders/octicons-builder/node_modules/@steeze-ui/icons/dist/index.js' imported from
│     at finalizeResolution (/home/vhs/Developer/icons/node_modules/.pnpm/[email protected]_cb9fa2b677905e47db2aeff929cdeb55/node_modules/ts-node/dist-raw/nod
│     at moduleResolve (/home/vhs/Developer/icons/node_modules/.pnpm/[email protected]_cb9fa2b677905e47db2aeff929cdeb55/node_modules/ts-node/dist-raw/node-esm
│     at Object.defaultResolve (/home/vhs/Developer/icons/node_modules/.pnpm/[email protected]_cb9fa2b677905e47db2aeff929cdeb55/node_modules/ts-node/dist-raw/
│     at /home/vhs/Developer/icons/node_modules/.pnpm/[email protected]_cb9fa2b677905e47db2aeff929cdeb55/node_modules/ts-node/src/esm.ts:152:38
│     at Generator.next (<anonymous>)
│     at /home/vhs/Developer/icons/node_modules/.pnpm/[email protected]_cb9fa2b677905e47db2aeff929cdeb55/node_modules/ts-node/dist/esm.js:8:71
│     at new Promise (<anonymous>)
│     at __awaiter (/home/vhs/Developer/icons/node_modules/.pnpm/[email protected]_cb9fa2b677905e47db2aeff929cdeb55/node_modules/ts-node/dist/esm.js:4:12)
│     at resolve (/home/vhs/Developer/icons/node_modules/.pnpm/[email protected]_cb9fa2b677905e47db2aeff929cdeb55/node_modules/ts-node/dist/esm.js:48:16)
│     at ESMLoader.resolve (node:internal/modules/esm/loader:530:30)
│  ELIFECYCLE  Command failed with exit code 1.
└─ Failed in 1.5s
/home/vhs/Developer/icons/packages/builders/octicons-builder:
 ERR_PNPM_RECURSIVE_RUN_FIRST_FAIL  @steeze-ui/[email protected] package: `pnpm build:icons && svelte-kit package`
Exit status 1
 ELIFECYCLE  Command failed with exit code 1.

Node 17.3
pnpm 6.28.0
npm 8.3.2
GNU/Linux 5.15.11

request: support for Phosphor icon family

It's a really beautiful set and I think it would be great to be included.

https://phosphoricons.com/

Can't import Icon.svelte?

<script>
    import { Icon } from '@steeze-ui/svelte-icon';
</script>

=> Unknown file extension ".svelte" for [...]/node_modules/@steeze-ui/svelte-icon/Icon.svelte

Also tried import Icon from '@steeze-ui/svelte-icon/Icon.svelte' but that doesn't work either.

Brand new install of Sveltekit with Vite 3.0.9