Thank you for the icons wrapper. How would I go about integrating it with fontawesome pro icons?

Hi there,

I was wondering if it's possible to add support for Tabler-Icons: https://github.com/tabler/tabler-icons

I used to use Tabler-icons-react with React, but now after switching to solid, I really prefer the design of Tabler-Icons over most other icon sets.

After upgrading I'm seeing massive issues with the icon rendering that returns empty svg tags with no content. If you remove the code then save, they appear - but break again when the page refreshes.

All the blank spots should be using Github Icons.

From the next major release of simple-icons (v11, releasing on May 26, 2024), We will begin removing third-party extensions from our README list that are not up to date with at least the previous major release.
For example, when v11 is released, we will remove any extensions that don't support v10.0.0 or higher.

How do I keep my package up to date?

There are two methods that prove most popular among other maintainers. It is up to you which you implement.

Using @latest from a CDN

Projects that use the CDN version of the project (jsDelivr/unpkg) can keep up to date simply by changing the version number in their code to @latest. That way - you're always using the most up to date version of the icon package.

Running a weekly CRON

Many of our third party contributors make use of GitHub actions, and a weekly CRON job to query that the version number of the main package has changed, and then update and build their own package. A great example of this is the DrawIO package by mondeja. The main package is released consistently on a Sunday - so we recommend running your CRON job on a Monday or Tuesday.

When you've got your extension running one of the above methods, drop us a Pull Request to update your version number on the README.

If you're in need of any support in implementing one of the above - please feel free to start a discussion or ask us on Discord.

Hi! I'm trying to use the heroicons pack, but I'm unable to make the stroke-width of the icon smaller (both with style attribute and with tailwind class). Making it bigger is no problem.

Bug:

When using solid-js 1.6.0, the attribute viewBox is missing for all SVGs.

Workaround:

Downgrading solid-js to version 1.5.9 or earlier.

I moved my project to a newer version of Astro (2.6) and all the solid-icons (except the hamburger one which I used for the navbar) I've used appear in the DOM but are invisible. I didn't have this issue with the older version of Astro 2.3

I recently updated to [email protected], but on every icon I have in my app, I get two nasty hydration errors on the client.

Error: Failed attempt to create new DOM elements during hydration. Check that the libraries you are using support hydration.
    at create (dev.js:571:13)
    at dev.js:579:63
    at untrack (dev.js:495:33)
    at Function.cloneNode (dev.js:579:13)
    at index.js:11:25
    at IconTemplate (index.js:50:3)
    at TbBrandGithub (index.js:4347:14)
    at dev.js:616:16
    at untrack (dev.js:499:12)
    at Object.fn (dev.js:612:7)
dev.js:735 Uncaught Error: Hydration Mismatch. Unable to find DOM nodes for hydration key: 1-0-0
    at getNextElement (dev.js:735:13)
    at ErrorBoundary.tsx:32:3
    at ErrorMessage (ErrorBoundary.tsx:59:79)
    at dev.js:616:16
    at untrack (dev.js:499:12)
    at Object.fn (dev.js:612:7)
    at runComputation (dev.js:777:22)
    at updateComputation (dev.js:756:3)
    at devComponent (dev.js:627:3)
    at createComponent (dev.js:1374:17) 

The TbBrandGithub in the first error message gets replaced by whatever icon I used in my app.
Please fix this so I can update to the latest SolidJS version

I'm trying deploy my project on cloudflare via the astro provided ssr adapter.

Whenever I try to build the project I get this error:

✘ [ERROR] No matching export in "node_modules/.pnpm/[email protected]/node_modules/solid-js/web/dist/server.js" for import "memo"

    node_modules/.pnpm/[email protected][email protected]/node_modules/solid-icons/lib/index.js:1:47:
      1 │ import { mergeProps, spread, insert, isServer, memo, template } from 'solid-js/web';
        ╵                                                ~~~~

✘ [ERROR] No matching export in "node_modules/.pnpm/[email protected]/node_modules/solid-js/web/dist/server.js" for import "template"

    node_modules/.pnpm/[email protected][email protected]/node_modules/solid-icons/lib/index.js:1:53:
      1 │ import { mergeProps, spread, insert, isServer, memo, template } from 'solid-js/web';
        ╵                                                      ~~~~~~~~

 error   No matching export in "node_modules/.pnpm/[email protected]/node_modules/solid-js/web/dist/server.js" for import "memo"
  File:
    node_modules/.pnpm/[email protected][email protected]/node_modules/solid-icons/lib/index.js:1:47
  Code:
    > 1 | import { mergeProps, spread, insert, isServer, memo, template } from 'solid-js/web';
        |                                               ^
      2 | import { splitProps } from 'solid-js';
      4 | const _tmpl$ = /*#__PURE__*/template(`<svg stroke-width="0"></svg>`, 2),

Out of curiosity I tried it with other adapters like vercel and the problem still persists.

It builds fine without any ssr adapters.

Here is a minimal reproduction of problem: https://codesandbox.io/p/sandbox/bold-wilbur-kch7zp
You can check it by doing a yarn build

App.tsx

import { Component } from "solid-js"
import * as TbIcon from 'solid-icons/tb'

export const App: Component = () => {
  return (
    <div>
      <TbIcon.TbRectangle size={50} />
    </div>
  )
}

tailwindcss config

module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx,css,md,mdx,html,json,scss}",
  ],
  darkMode: "class",
  theme: {
    extend: {},
  },
  plugins: [require("daisyui")],
};

dependencies

"devDependencies": {
    "autoprefixer": "^10.4.13",
    "daisyui": "^2.36.1",
    "postcss": "^8.4.18",
    "tailwindcss": "^3.2.1",
    "typescript": "^4.8.2",
    "vite": "^3.0.9",
    "vite-plugin-solid": "^2.3.0"
  },
"dependencies": {
    "solid-icons": "^1.0.3",
    "solid-js": "^1.5.1"
  }

Stack: create-tw (SolidJS, Typescript, Daisyui)

It would be great to have https://phosphoricons.com/

All RiUser (and maybe other) icons have an incorrect component export name.

My existing app broke after upgrading this package from 1.0.4 to 1.0.8 due to a bunch of RiUser icons that were used, that are now no longer exported. It appears they are not truly gone, they just get mangled in the icon generation process I assume.

You can verify this issue by visiting eg. https://solid-icons.vercel.app/search/RiUser, please notice how:

• invalid import statements are shown: import { RiUser & FacesAccountBoxFill } from 'solid-icons/ri',
• invalid component names are used as example: <RiUser & FacesAccountBoxFill />.

Workaround: keep using version 1.0.4, as this issue presents itself in 1.0.5, 1.0.6., 1.0.7 and 1.0.8.

Reproduction: https://github.com/marvin-j97/solid-1.7-icons

Icon is invisible.
Changing client:load to client:only fixes it.

The documentation says that the HeroIcons version is 1.0.3, but 2.0.17 is out:

Can this package be updated?

I used to be able to do this:
<Available class={store?.me?.status === "available" && s({ color: col })} onClick={() => setMyStatus("available")} />

But now there is somewhy "currentcolor" set as color stylesheet... so i have to do:
<Available class={store?.me?.status === "available" && s({${col} !important})} onClick={() => setMyStatus("available")} />

So there was a breaking change in some patch a while ago. Why do i need to ovverride the color style now? º¿º¬

If I use the new "bundler" moduleResolution in Typescript 5.0 (Beta). I get the following error:

Could not find a declaration file for module 'solid-icons/bi'. '.../node_modules/solid-icons/bi/index.cjs' implicitly has an 'any' type.
There are types at .../node_modules/solid-icons/bi/index.d.ts', but this result could not be resolved when respecting package.json "exports". The 'solid-icons' library may need to update its package.json or typings.

3 import { BiRegularTrash, BiRegularEdit } from 'solid-icons/bi';

The problem seems to be that the "types" field is missing in the "exports" field in the generated package.json.

I will create an PR to fix that issue.

`ERROR in ./node_modules/solid-icons/ri/index.js 7496:27
Module parse failed: Unexpected token (7496:27)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| }, props)
| }

export function RiHealth & MedicalBrainFill (props) {
| return IconTemplate({
| a: {"viewBox":"0 0 24 24"},
`

Using Solid-Start to bootstrap a SolidJS project, I get the following error,
TypeError: __vite_ssr_import_0__.template is not a function at eval (/node_modules/.pnpm/[email protected][email protected]/node_modules/solid-icons/esm/IconWrapper.js:6:38)

If I remove the icons but leave the package in package.json, the build log provides this clarification:
solid-icons 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.

Basically, it means the icon imports don't work with Solid-Start.

So, this could probably use a fix! Otherwise, it means grabbing the raw SVGs and creating custom wrappers for them, which is tedious.

I'm busy with Solid Start project that requires icons.

Very excited for solid-icons, but I'm struggling to use this in my component library.

12:48:43 PM [vite] Error when evaluating SSR module ~start/entry-server: failed to import "/@fs/workspace/monorepo/node_modules/.pnpm/[email protected]_@[email protected]_@[email protected][email protected][email protected][email protected]/node_modules/solid-start/entry-server/index.ts"
|- /workspace/monorepo/node_modules/.pnpm/[email protected][email protected]/node_modules/solid-icons/hi/index.js:1
import { IconTemplate } from "../lib/index.jsx";
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at internalCompileFunction (node:internal/vm:73:18)
    at wrapSafe (node:internal/modules/cjs/loader:1153:20)
    at Module._compile (node:internal/modules/cjs/loader:1205:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1295:10)
    at Module.load (node:internal/modules/cjs/loader:1091:32)
    at Module._load (node:internal/modules/cjs/loader:938:12)
    at cjsLoader (node:internal/modules/esm/translators:284:17)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:234:7)
    at ModuleJob.run (node:internal/modules/esm/module_job:217:25)
    at async ModuleLoader.import (node:internal/modules/esm/loader:316:24)
    at async nodeImport (file:///workspace/monorepo/node_modules/.pnpm/[email protected]_@[email protected][email protected]/node_modules/vite/dist/node/chunks/dep-bb8a8339.js:56097:17)
    at async ssrImport (file:///workspace/monorepo/node_modules/.pnpm/[email protected]_@[email protected][email protected]/node_modules/vite/dist/node/chunks/dep-bb8a8339.js:55990:24)
    at async eval (/workspace/monorepo/packages/flowbite-react-solid/dist/server.mjs:6:31)
    at async instantiateModule (file:///workspace/monorepo/node_modules/.pnpm/[email protected]_@[email protected][email protected]/node_modules/vite/dist/node/chunks/dep-bb8a8339.js:56052:9)

"solid-start": "^0.3.10"

$ node -v
v20.9.0

"name": "solid-icons",
"version": "1.1.0",

import { HiOutlineChevronLeft, HiOutlineChevronRight } from "solid-icons/hi";

Referring to https://solid-icons.vercel.app/search/exchange

Picking a collection removes the search term. Attempting to search removes the collection filter.

Props doesn't react to solidjs signals.

For example the next won't work:

<VscHome size={64} class={pathname() != "/home" ? cssIcon : cssIconSelected} onClick={() => { navigate("/home"); }} />
As in <div class={pathname() != "/home" ? cssIcon : cssIconSelected}></div> does react to signals.

In commit 1abc8e4, the following change made Remix Icon's color broken:

-fill="currentColor"
+color={props.color || "currentColor"}

I'm not sure if this is the right place to fix it, or Remix Icon itself (Remix-Design/RemixIcon#433), but could we re-add fill property as a workaround at least?

Thanks in advance.

I have seen your responses to other issues. But, your repo gives trust :) So maybe you can push different packages to npm and make here one-shop for solid icons.

https://github.com/sacarvy/solidjs-fluent-icons/tree/main/packages/solidjs-fluent-icons

Thanks for your open-source efforts,
Fatih

I started receiving this issue on first load when loading my app with SSR in a dev environment. It was weird because when the hot reload server would detect a change and reload, the icons would fix themselves. Eventually I was able to reproduce it by disabling Javascript altogether. Seems to only exist when using the Heroicons library.

import { HiOutlineHome, HiOutlineBriefcase, HiOutlineFolder, HiOutlineNewspaper, HiOutlineChat, HiOutlineFire } from "solid-icons/hi";
const options = [
    {
        icon: <HiOutlineHome size={24} />,
    },
    {
        icon: <HiOutlineBriefcase size={24}/>,
    },
    {
        icon: <HiOutlineFolder size={24}/>,
    },
    {
        icon: <HiOutlineFire size={24}/>,
    },
    {
        icon: <HiOutlineNewspaper size={24}/>,
    },
]

function NavOption(props) {
    return (   
        <A href="#">
            {props.icon}
        </A>                   
    )
}

export default function NavBar() {
    return (      
        <nav class="mt-8 flex-1 space-y-1 px-2" aria-label="Sidebar">
              <For each={options}>
                      {(option) => 
                            <NavOption icon={option.icon} />
                       }
               </For>
         </nav>
         ...
     )
}

I am using solid-icons with Solid-start. However, I have noticed that innerHTML is set on the client side using JavaScript. This is slow when many icons are used on a website based on the real-world profiling I have done.

https://github.com/x64Bits/solid-icons/blob/8805c0198e68872903f01587ce66143853b513b7/src/lib/index.tsx#LL38C7-L38C16

One suggestion would be to import the string of the SVG file and use it as the src attribute for the img tag. Vite and some other build tools are very smart for inlining these strings during compile-time.

Are there any other ways to improve this?

Would it be possible to add the Material Design icon pack to the library? It has an MIT license and would be great to include it here as well.

Essentially asking for a SolidJS port of react-icons/md

It doesn't work in Astro JS. Client directives (e.g. client:load) need to be added for it to work.

For example,

---
import { FiActivity } from 'solid-icons/fi'
---

<FiActivity />

renders

<svg fill="none" stroke-width="2" xmlns="http://www.w3.org/2000/svg" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24" height="1em" width="1em" style="overflow: visible;"></svg>

The <path> doesn't render.

Issue Description

importing "solid-icons/lib" using vite (import { CustomIcon } from 'solid-icons/lib';) yields [vite] Internal server error: Missing "./lib" specifier in "solid-icons" package.

An export may be missing on the lib package.

Edit:

It appears that import { CustomIcon } from 'solid-icons'; does work, it will be greatly appreciated a change in the README Custom Icon example to avoid confusion. 😄 👍🏼

package.json

{
  "name": "vite-template-solid",
  "version": "0.0.0",
  "description": "",
  "scripts": {
    "start": "vite --host",
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview"
  },
  "license": "MIT",
  "devDependencies": {
    "typescript": "^5.1.3",
    "vite": "^4.3.9",
    "vite-plugin-solid": "^2.7.0"
  },
  "dependencies": {
    "solid-icons": "^1.1.0",
    "solid-js": "^1.7.6"
  }
}

Reproduction Link

https://stackblitz.com/edit/github-3drhwq-q9vwbm?file=src%2FApp.tsx

old version is right, latest is wrong, should set default color = curentColor

Description

When building a SolidJS project using solid-icons, Babel throws an optimization error indicating that the styling of some modules exceeds the maximum size of 500KB. This is occurring specifically with solid-icons/fa/index.js and solid-icons/tb/index.js. The error message is repeated multiple times, suggesting that the issue persists through multiple attempts to compile.

Steps to Reproduce

1. Set up a SolidJS project with @solidjs/start.
2. Include the solid-icons package in the dependencies.
3. Run the build script.

Expected Behavior

The build should complete without errors, and Babel should handle the module size appropriately, possibly by splitting or tree-shaking.

Actual Behavior

The following error is received:

[BABEL] Note: The code generator has deoptimised the styling of /home/don/MEGA/Projects/coding.global-web/node_modules/solid-icons/tb/index.js as it exceeds the max of 500KB.
[BABEL] Note: The code generator has deoptimised the styling of /home/don/MEGA/Projects/coding.global-web/node_modules/solid-icons/fa/index.js as it exceeds the max of 500KB.

Environment

• SolidJS Version: 1.8.15
• Solid Icons Version: 1.1.0
• Node Version: 20
• Package Manager: [yarn]
• Operating System: [Linux]

Possible Solution

Could this be an issue with how the icons are being imported or bundled? Is there a recommended way to import solid-icons that could avoid this problem?

Additional Context

Here is another MIT icon set if you like to use: https://github.com/halfmage/majesticons

Hey there,

since today some of the icons are breaking my layout.
The only thing I changed was switching from windows to linux (ubuntu).
After switching back to windows the error still appears.

The problem is, that some Icons are displayed huge:
The layer svg should be displayed below the "house":

The HTML and CSS is the same as in the other icons.
Icon:

Example two:
The + sign should be in the dashed square (where the red arrow points to):

Icon:

I removed the nodes_modules dir and did a fresh "npm install", but nothing changed.

I have no idea how this could have happend and hope you can help me.

Thanks a lot!

1. Firefox opens "Quick find" when I press '/' for search focus
   Or maybe my desktop enviroment (XFCE) has some hidden shortcuts I don't know about
   I would be greateful if you could add Ctrl + K shortcut for search

2. Could you provide category specific search?
   Beacuse sometimes you want specific icon pack so that icons stay consistent

Thank you for you time

Should import from solid-icons/bi, not solidjs-icons/bi

Currently causes a dependency conflict when installing to a project with [email protected] installed.

Summary:

Consider updating the docs about custom icons as a feature or use-case

Details:

After looking through the solid-icon tests, I realized that it is actually quite easy to use solid-icons to make custom icons. One can simply pass the path data and view box to the IconTemplate directly.

I think it would be great to add something about this to the project's README.md file. Using solid-icons to make custom icons might not be obvious to a new user, and yet, it can be a very useful feature for the case when you need to draw a new icon to match those from a library.

Example of creating a custom icon component:

import { IconProps, IconTemplate, IconTree } from "solid-icons";

export default function FlameIcon(props: IconProps) {
  const iconTree: IconTree = {
    a: { fill: "currentColor", viewBox: "0 0 384 512" },
    c: '<path d="M384 319.1C384 425.9 297.9 512 192 512S0 425.87 0 320c0-58.67 27.82-106.8 54.57-134.1C69.54 169.3 96 179.8 96 201.5V287c0 35.17 27.97 64.5 63.16 64.94C194.9 352.5 224 323.6 224 288c0-88-175.1-96.12-52.15-277.2C185.35-8.92 216 .03 216 23.83 215.1 127 384 149.7 384 319.1z"/>',
  };

  return IconTemplate(iconTree, props);
}

Example usage of a custom component

<div>
   <FlameIcon size="50px"/>
</div>

This should perhaps not be fixed in this library,

But how would people use the color of the logos for Google and Microsoft that have multiple colors in their logo.

import {
FaBrandsMicrosoft,
FaBrandsGoogle,
} from "solid-icons/fa";

Both of these icons are one single path in the svg. meaning it's least really hard to set the colors correct.

Hi,

Is there a table showing which abbreviation (to use when importing) for the different icon packs? For example, how to import an icon from the Feather pack?

Thanks 😃

I tried changing its color to white but it just stays black

I'm trying to build a core library, which will get imported and used by multiple projects. I has an icon modules where it imports certain icons from solid-icons. The problem happens when I use rollup to bundle the library, all icons from solid-icons cause this error.

[!] RollupError: "RiDesignEdit2Line" is not exported by "node_modules/.pnpm/[email protected][email protected]/node_modules/solid-icons/ri/index.cjs", imported by "src/components/base/icons/icons-remix.tsx".
https://rollupjs.org/troubleshooting/#error-name-is-not-exported-by-module

Here are the rollup.config.ts

import ignoreImport from "rollup-plugin-ignore-import";
import withSolid from "rollup-preset-solid";

const plugins = [
  ignoreImport({
    // Ignore all .scss and .css file imports while building the bundle
    extensions: [".scss", ".css"],
    // Optional: replace body for ignored files. Default value is "export default undefined;"
    body: "export default undefined;",
  }),
];

export default withSolid([
  {
    input: "src/index.ts",
    targets: ["esm"],
    mappingName: "index",
    output: {
      file: "./dist/lib/index.js",
      format: "module",
      inlineDynamicImports: true,
    },
    plugins,
  },
  {
    input: "src/index.ts",
    mappingName: "index",
    solidOptions: {
      generate: "ssr",
      hydratable: false,
    },
    targets: ["cjs"],
    output: {
      file: "./dist/lib/index.cjs",
      format: "cjs",
    },
    plugins,
  },
]);

Seems like to get only 2 icons, I have to npm i all 14156 icons on my drive? If true, maybe split each icon family as a separate package?
I'd rather save my bandwidth for cat videos ;)

Hi, I want to change the icon color on hover but it does not work. I'm porting from react to solidjss and react icons support it.

this is how its setup

how can I change the color on hover?

Thank you for this awesome icon package.
I want to use icons dynamically for menu purposes that are generated from the database.
I will import all the icons that will be used in the application. (approximately 50 icons)
I wrote the code as follows:

//MyIcon.tsx
import { TbLockOpen, TbLock, TbExclamationCircle } from 'solid-icons/tb'
import { BiSolidChevronDown, BiSolidChevronUp } from 'solid-icons/bi'
import { Dynamic } from 'solid-js/web'

function Icon(props: any) {
  //set the icon
  const iconMaps: any = {
    default: () => <TbExclamationCircle size={props.size} color={props.color} />,
    tbExclamationCircle: () => <TbExclamationCircle size={props.size} color={props.color} />,
    tbLock: () => <TbLock size={props.size} color={props.color} />,
    tbLockOpen: () => <TbLockOpen color={props.color} />,
    biSolidChevronDown: () => <BiSolidChevronDown size={props.size} color={props.color} />,
    biSolidChevronUp: () => <BiSolidChevronUp size={props.size} color={props.color} />,
  }

  return <Dynamic component={iconMaps[props.name ? props.name : 'default']} />
}

export default Icon

then use it in the component

//parent component
import MyIcon from './MyIcon'
//...
<MyIcon name="biSolidChevronDown"/>

Is this method correct? not just "work"
has anyone taken the same approach?
Thanks in advance

Additional note:
i came from vuejs. I have used the mdi-vue package which I think is good.
Has anyone kindly made a package equivalent to that, using solid-icons for SolidJS?
https://github.com/therufa/mdi-vue
as an example

//mdi.ts
import {
    mdiViewDashboard,
    mdiThemeLightDark
} from "@mdi/js";

const iconList = {
    mdiViewDashboard,
    mdiThemeLightDark
}
export default iconList;

//main.ts
import { createApp } from 'vue'
import App from './App.vue'
import iconList from './mdi'
import mdiVue from 'mdi-vue/v3'
//...
const app = createApp(App)
app.use(mdiVue, { icons: iconList })

//in the components
<mdicon name="view-dashboard" />