x64bits / solid-icons Goto Github PK
View Code? Open in Web Editor NEWThe simplest way to use icons in SolidJS
Home Page: https://solid-icons.vercel.app
License: MIT License
The simplest way to use icons in SolidJS
Home Page: https://solid-icons.vercel.app
License: MIT License
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,
},
]);
Reproduction: https://github.com/marvin-j97/solid-1.7-icons
Icon is invisible.
Changing client:load
to client:only
fixes it.
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.
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.
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!
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/
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.
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?
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? º¿º¬
Thank you for the icons wrapper. How would I go about integrating it with fontawesome pro icons?
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" />
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
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:
import { RiUser & FacesAccountBoxFill } from 'solid-icons/ri'
,<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
.
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
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.
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.
`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"},
`
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.
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.
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. 😄 👍🏼
{
"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"
}
}
https://stackblitz.com/edit/github-3drhwq-q9vwbm?file=src%2FApp.tsx
Should import from solid-icons/bi
, not solidjs-icons/bi
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.
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.
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?
Here is another MIT icon set if you like to use: https://github.com/halfmage/majesticons
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'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.
Referring to https://solid-icons.vercel.app/search/exchange
Picking a collection removes the search term. Attempting to search removes the collection filter.
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.
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
Could you provide category specific search?
Beacuse sometimes you want specific icon pack so that icons stay consistent
Thank you for you time
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";
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
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
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>
...
)
}
Consider updating the docs about custom icons as a feature or use-case
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.
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);
}
<div>
<FlameIcon size="50px"/>
</div>
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.
@solidjs/start
.solid-icons
package in the dependencies.The build should complete without errors, and Babel should handle the module size appropriately, possibly by splitting or tree-shaking.
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.
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?
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 😃
Currently causes a dependency conflict when installing to a project with [email protected] installed.
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
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.
There are two methods that prove most popular among other maintainers. It is up to you which you implement.
@latest
from a CDNProjects 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.
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.
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.