From f354480a3d47016086b43c3ecb1618a5642d4d71 Mon Sep 17 00:00:00 2001 From: PauMAVA Date: Wed, 4 Dec 2024 18:55:25 +0100 Subject: [PATCH 1/5] Implement support for SolidJS --- .gitignore | 22 +-- bin/build/index.js | 4 + bin/build/targets/solid-js/index.js | 121 ++++++++++++++++ .../solid-js/resources/context-template.js | 36 +++++ .../solid-js/resources/icon-template.js | 25 ++++ bin/prepublish.js | 1 + package.json | 3 +- packages/iconoir-solid-js/LICENSE | 21 +++ packages/iconoir-solid-js/README.md | 96 +++++++++++++ packages/iconoir-solid-js/package.json | 47 ++++++ pnpm-lock.yaml | 134 ++++++++++++++++++ 11 files changed, 499 insertions(+), 11 deletions(-) create mode 100644 bin/build/targets/solid-js/index.js create mode 100644 bin/build/targets/solid-js/resources/context-template.js create mode 100644 bin/build/targets/solid-js/resources/icon-template.js create mode 100644 packages/iconoir-solid-js/LICENSE create mode 100644 packages/iconoir-solid-js/README.md create mode 100644 packages/iconoir-solid-js/package.json diff --git a/.gitignore b/.gitignore index 2c60c589..1d7dc3cf 100644 --- a/.gitignore +++ b/.gitignore @@ -1,10 +1,12 @@ -.DS_Store - -node_modules/ -dist/ - -packages/iconoir-flutter/lib/ - -packages/iconoir-vue/src/* -!packages/iconoir-vue/src/IconoirProvider.vue -!packages/iconoir-vue/src/providerKey.ts +.DS_Store + +node_modules/ +dist/ + +packages/iconoir-flutter/lib/ + +packages/iconoir-vue/src/* +!packages/iconoir-vue/src/IconoirProvider.vue +!packages/iconoir-vue/src/providerKey.ts + +packages/iconoir-solid-js/src/* diff --git a/bin/build/index.js b/bin/build/index.js index 54ce89e0..ecbe3660 100644 --- a/bin/build/index.js +++ b/bin/build/index.js @@ -33,6 +33,10 @@ const targets = { native: true, path: 'packages/iconoir-react-native', }, + 'solid-js': { + title: 'SolidJS library', + path: 'packages/iconoir-solid-js', + }, 'vue': { title: 'Vue library', path: 'packages/iconoir-vue', diff --git a/bin/build/targets/solid-js/index.js b/bin/build/targets/solid-js/index.js new file mode 100644 index 00000000..e8222cca --- /dev/null +++ b/bin/build/targets/solid-js/index.js @@ -0,0 +1,121 @@ +import fs from 'node:fs/promises'; +import path from 'node:path'; +import iconTemplate from './resources/icon-template.js'; +import contextTemplate from './resources/context-template.js'; +import { generateExport } from '../../lib/import-export.js'; +import { build, defineConfig } from 'vite'; +import solidPlugin from 'vite-plugin-solid'; +import dts from 'vite-plugin-dts'; + +export default async (ctx, target) => { + const promises = []; + + const outDir = path.join(target.path, 'src'); + const distDir = path.join(target.path, 'dist'); + + await fs.rm(outDir, { recursive: true }); + await fs.rm(distDir, { recursive: true }); + + await fs.mkdir(outDir, { recursive: true }); + + await fs.writeFile( + path.join(outDir, 'IconoirContext.tsx'), + contextTemplate(), + ); + + const mainIndexContent = [ + generateExport('useIconoir', './IconoirContext.tsx'), + generateExport('IconoirProvider', './IconoirContext.tsx'), + ]; + + for (const [variant, icons] of Object.entries(ctx.icons)) { + const variantOutDir = path.join(outDir, variant); + await fs.mkdir(variantOutDir, { recursive: true }); + + const variantIndexContent = [ + generateExport('useIconoir', '../IconoirContext.tsx'), + generateExport('IconoirProvider', '../IconoirContext.tsx'), + ]; + + const generateIconFile = async (src, iconName, solidFileName) => { + const iconContent = await fs.readFile(src, 'utf8'); + + const componentContent = iconTemplate( + '../IconoirContext.tsx', + iconName, + iconContent, + ); + + const vuePath = path.join(variantOutDir, solidFileName); + + return fs.writeFile(vuePath, componentContent); + }; + + for (const icon of icons) { + const solidFileName = `${icon.pascalName}.tsx`; + + promises.push( + generateIconFile(icon.path, icon.pascalName, solidFileName), + ); + + const mainIndexComponentName = + variant === ctx.global.defaultVariant + ? icon.pascalName + : [icon.pascalName, 'as', icon.pascalNameVariant].join(' '); + + mainIndexContent.push( + generateExport( + `${mainIndexComponentName}`, + `./${variant}/${solidFileName}`, + ), + ); + + variantIndexContent.push( + generateExport(`${icon.pascalName}`, `./${solidFileName}`), + ); + } + + promises.push( + fs.writeFile(path.join(variantOutDir, 'index.ts'), variantIndexContent), + ); + } + + promises.push(fs.writeFile(path.join(outDir, 'index.ts'), mainIndexContent)); + + await Promise.all(promises); + + let config = { + root: target.path, + logLevel: 'silent', + build: { + minify: false, + outDir: 'dist', + lib: { + entry: path.join('src', 'index.ts'), + fileName: (format, entryName) => { + return format === 'cjs' ? `${entryName}.js` : `esm/${entryName}.mjs`; + }, + formats: ['cjs', 'es'], + }, + rollupOptions: { + external: ['solid-js'], + }, + emptyOutDir: false, + }, + plugins: [ + solidPlugin(), + dts({ + include: ['src'], + }), + ], + }; + + await build(defineConfig(config)); + + for (const variant of Object.keys(ctx.icons)) { + config.build.outDir = path.join('dist', variant); + config.build.lib.entry = path.join('src', variant, 'index.ts'); + + await build(config); + } +}; diff --git a/bin/build/targets/solid-js/resources/context-template.js b/bin/build/targets/solid-js/resources/context-template.js new file mode 100644 index 00000000..ece30135 --- /dev/null +++ b/bin/build/targets/solid-js/resources/context-template.js @@ -0,0 +1,36 @@ +const template = () => { + return ` +import { useContext, createContext, type JSX, splitProps, mergeProps } from "solid-js"; + +type IconoirContextValue = Partial>; + +export const IconoirContext = createContext({}); + +export interface IconoirProviderProps extends Partial> { + children: JSX.Element | JSX.Element[]; +} + +const defaults = { + color: 'currentColor', + width: '1.5em', + height: '1.5em', + 'stroke-width': 1.5, +}; + +export function IconoirProvider(props: IconoirProviderProps) { + const [_, iconProps] = splitProps(props, ['children']); + const mergedProps = mergeProps(defaults, iconProps || {}); + return ( + + {props.children} + + ); +} + +export function useIconoir() { + return useContext(IconoirContext); +} +`; +}; + +export default template; diff --git a/bin/build/targets/solid-js/resources/icon-template.js b/bin/build/targets/solid-js/resources/icon-template.js new file mode 100644 index 00000000..d59e481f --- /dev/null +++ b/bin/build/targets/solid-js/resources/icon-template.js @@ -0,0 +1,25 @@ +import { generateImport } from '../../../lib/import-export.js'; + +const injectProps = (svg) => { + return svg.replace(/]*)>/, ``); +}; + +export function getTemplate(iconoirContextPath, componentName, svgContent) { + const useIconoirImport = generateImport(['useIconoir'], iconoirContextPath); + + return ` + import { splitProps, mergeProps, type JSX } from "solid-js"; + ${useIconoirImport}; + + export const ${componentName} = (props: Partial>) => { + const context = useIconoir(); + const allProps = mergeProps(context || {}, props); + const [_, rest] = splitProps(allProps, ["ref"]); + return ${injectProps(svgContent)}; + }; + + export default ${componentName}; + `; +} + +export default getTemplate; diff --git a/bin/prepublish.js b/bin/prepublish.js index da7dcae6..48733e34 100644 --- a/bin/prepublish.js +++ b/bin/prepublish.js @@ -16,6 +16,7 @@ if (!newVersion) { publishNpmPackage('iconoir'); publishNpmPackage('iconoir-react'); publishNpmPackage('iconoir-react-native'); +publishNpmPackage('iconoir-solid-js'); publishNpmPackage('iconoir-vue'); publishPubPackage('iconoir-flutter'); diff --git a/package.json b/package.json index e16c2290..32f17df1 100644 --- a/package.json +++ b/package.json @@ -57,6 +57,7 @@ "tinypool": "1.1.1", "typescript": "~5.8.3", "vite": "^7.0.6", - "vite-plugin-dts": "^4.5.4" + "vite-plugin-dts": "^4.5.4", + "vite-plugin-solid": "2.11.7" } } diff --git a/packages/iconoir-solid-js/LICENSE b/packages/iconoir-solid-js/LICENSE new file mode 100644 index 00000000..06eb1f09 --- /dev/null +++ b/packages/iconoir-solid-js/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2021 Daniel Martin + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. \ No newline at end of file diff --git a/packages/iconoir-solid-js/README.md b/packages/iconoir-solid-js/README.md new file mode 100644 index 00000000..e268dcf2 --- /dev/null +++ b/packages/iconoir-solid-js/README.md @@ -0,0 +1,96 @@ +# Iconoir - solid-js + +[![NPM Version](https://img.shields.io/npm/v/iconoir-solid-js?style=flat-square)](https://www.npmjs.com/package/iconoir-solid-js) +[![NPM Monthly Downloads](https://img.shields.io/npm/dm/iconoir-solid-js?style=flat-square)](https://www.npmjs.com/package/iconoir-solid-js) +[![NPM License](https://img.shields.io/npm/l/iconoir-solid-js?style=flat-square)](https://github.com/iconoir-icons/iconoir/blob/main/packages/iconoir-solid-js/LICENSE) + +[Iconoir](https://iconoir.com/) is an open-source library with 1300+ unique SVG icons, designed on a 24x24 pixels grid. No premium icons, no email sign-up, no newsletters. + +`iconoir-solid-js` is an open source package that exports these icons as solid-js components that can be used in all of your solid-js projects. + +## Installation + +| npm | Yarn | pnpm | +| ------------------------ | --------------------------- | --------------------------- | +| `npm i iconoir-solid-js` | `yarn add iconoir-solid-js` | `pnpm add iconoir-solid-js` | + +## Usage + +```javascript +import { Iconoir } from 'iconoir-solid-js'; + +const App = () => { + return ; +}; + +export default App; +``` + +Icons can take any standard SVG properties as optional props, e.g. + +```javascript + +``` + +Default values for the most common props are given below: + +| Prop name | Default value | +| ------------ | -------------- | +| color | "currentColor" | +| width | "1.5em" | +| height | "1.5em" | +| stroke-width | 1.5 | + +### IconoirProvider + +Tired of specifying the same props for every single icon, every time you use them? So were we. Use IconoirProvider to set the default icon props for everything inside IconoirProvider. You can set any prop that an svg tag may have, more specifically any prop from `JSX.SvgSVGAttributes`. These props will be used then as defaults and can be overriden on any specific icon. + +```tsx +import { IconoirProvider, Check } from 'iconoir-solid-js'; + +return ( + + + + + + +); +``` + +## Icon names + +The SolidJs components are named as PascalCase variations of their reference names (i.e. `airplane-helix-45deg` becomes `AirplaneHelix45deg`). + +When using variants the `regular` variant is the default one, so if we want to use a `solid` icon we should add the variant name at the end (i.e. `UndoCircle` is regular and `UndoCircleSolid` is solid). + +If we want we can use the name without the variant and import from the variant entry point in order to always use that type of variant. + +- `iconoir-solid-js/regular` +- `iconoir-solid-js/solid` + +```tsx +import { UndoCircle } from 'iconoir-solid-js/regular'; + +// This is a regular icon +return ; +``` + +```tsx +import { UndoCircle } from 'iconoir-solid-js/solid'; + +// This is a solid icon +return ; +``` + +```tsx +import { UndoCircle, UndoCircleSolid } from 'iconoir-solid-js'; + +// These are regular and solid icons +return ( + <> + + + +); +``` diff --git a/packages/iconoir-solid-js/package.json b/packages/iconoir-solid-js/package.json new file mode 100644 index 00000000..efe832d0 --- /dev/null +++ b/packages/iconoir-solid-js/package.json @@ -0,0 +1,47 @@ +{ + "name": "iconoir-solid-js", + "version": "7.10.1", + "description": "solid-js library for Iconoir, the biggest open source icon library with tons of free icons.", + "keywords": [ + "icons", + "svg", + "library", + "solid-js" + ], + "homepage": "https://iconoir.com", + "repository": { + "type": "git", + "url": "https://github.com/iconoir-icons/iconoir.git", + "directory": "packages/iconoir-solid-js" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/iconoir" + }, + "license": "MIT", + "sideEffects": false, + "exports": { + ".": { + "import": "./dist/esm/index.mjs", + "require": "./dist/index.js" + }, + "./regular": { + "import": "./dist/regular/esm/index.mjs", + "require": "./dist/regular/index.js" + }, + "./solid": { + "import": "./dist/solid/esm/index.mjs", + "require": "./dist/solid/index.js" + } + }, + "main": "./dist/index.js", + "module": "./dist/esm/index.mjs", + "types": "./dist/index.d.ts", + "files": [ + "dist" + ], + "devDependencies": {}, + "peerDependencies": { + "solid-js": "^1.7 || ^1.8 || ^1.9" + } +} diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 32d72c12..fa5d5afb 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -67,6 +67,9 @@ importers: vite-plugin-dts: specifier: ^4.5.4 version: 4.5.4(@types/node@22.16.5)(rollup@4.45.3)(typescript@5.8.3)(vite@7.0.6(@types/node@22.16.5)(lightningcss@1.27.0)(terser@5.43.1)(yaml@2.8.0)) + vite-plugin-solid: + specifier: 2.11.7 + version: 2.11.7(solid-js@1.9.7)(vite@7.0.6(@types/node@22.16.5)(lightningcss@1.27.0)(terser@5.43.1)(yaml@2.8.0)) examples/next: dependencies: @@ -304,6 +307,12 @@ importers: specifier: ^19.1.8 version: 19.1.8 + packages/iconoir-solid-js: + dependencies: + solid-js: + specifier: ^1.7 || ^1.8 || ^1.9 + version: 1.9.7 + packages/iconoir-vue: dependencies: vue: @@ -442,6 +451,10 @@ packages: resolution: {integrity: sha512-E5chM8eWjTp/aNoVpcbfM7mLxu9XGLWYise2eBKGQomAk/Mb4XoxyqXTZbuTohbsl8EKqdlMhnDI2CCLfcs9wA==} engines: {node: '>=6.9.0'} + '@babel/helper-module-imports@7.18.6': + resolution: {integrity: sha512-0NFvs3VkuSYbFi1x2Vd6tKrywq+z/cLeYC/RJNFrIX/30Bf5aiGYbtvGXolEktzJH8o5E5KJ3tT+nkxuuZFVlA==} + engines: {node: '>=6.9.0'} + '@babel/helper-module-imports@7.27.1': resolution: {integrity: sha512-0gSFWUPNXNopqtIPQvlD5WgXYI5GY2kP2cCvoT8kczjbfcfuIljTbcWrulD1CIPIX2gt1wghbDy08yE1p+/r3w==} engines: {node: '>=6.9.0'} @@ -2642,6 +2655,11 @@ packages: resolution: {integrity: sha512-ESAc/RJvGTFEzRwOTT4+lNDk/GNHMkKbNzsvT0qKRfDyyYTskxB5rnU2njIDYVxXCBHHEI1c0YwHob3WaYujOg==} engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0} + babel-plugin-jsx-dom-expressions@0.39.8: + resolution: {integrity: sha512-/MVOIIjonylDXnrWmG23ZX82m9mtKATsVHB7zYlPfDR9Vdd/NBE48if+wv27bSkBtyO7EPMUlcUc4J63QwuACQ==} + peerDependencies: + '@babel/core': ^7.20.12 + babel-plugin-polyfill-corejs2@0.4.14: resolution: {integrity: sha512-Co2Y9wX854ts6U8gAAPXfn0GmAyctHuK8n0Yhfjd6t30g7yvKjspvvOo9yG+z52PZRgFErt7Ka2pYnXCjLKEpg==} peerDependencies: @@ -2685,6 +2703,11 @@ packages: peerDependencies: '@babel/core': ^7.0.0 + babel-preset-solid@1.9.6: + resolution: {integrity: sha512-HXTK9f93QxoH8dYn1M2mJdOlWgMsR88Lg/ul6QCZGkNTktjTE5HAf93YxQumHoCudLEtZrU1cFCMFOVho6GqFg==} + peerDependencies: + '@babel/core': ^7.0.0 + bail@2.0.2: resolution: {integrity: sha512-0xO6mYd7JB2YesxDKplafRpsiOzPt9V02ddPCLbY1xYGPOX24NTyN50qnUxgCPcSoYMhKpAuBTjQoRZCAkUDRw==} @@ -4037,6 +4060,9 @@ packages: resolution: {integrity: sha512-D5JbOMBIR/TVZkubHT+OyT2705QvogUW4IBn6nHd756OwieSF9aDYFj4dv6HHEVGYbHaLETa3WggZYWWMyy3ZQ==} engines: {node: '>=10'} + html-entities@2.3.3: + resolution: {integrity: sha512-DV5Ln36z34NNTDgnz0EWGBLZENelNAtkiFA4kyNOG2tDI6Mz1uSWiq1wAKdyjnJwyDiDO7Fa2SO1CTxPXL8VxA==} + html-void-elements@3.0.0: resolution: {integrity: sha512-bEqo66MRXsUGxWHV5IP0PUiAWwoEjba4VCzg0LjFJBpchPaTfyfCKTG6bc5F8ucKec3q5y6qOdGyYTSBEvhCrg==} @@ -4700,6 +4726,10 @@ packages: resolution: {integrity: sha512-S3UwM3yj5mtUSEfP41UZmt/0SCoVYUcU1rkXv+BQ5Ig8ndL4sPoJNBUJERafdPb5jjHJGuMgytgKvKIf58XNBw==} engines: {node: '>= 0.10.0'} + merge-anything@5.1.7: + resolution: {integrity: sha512-eRtbOb1N5iyH0tkQDAoQ4Ipsp/5qSR79Dzrz8hEPxRX10RWWR/iQXdoKmBSRCThY1Fh5EhISDtpSc93fpxUniQ==} + engines: {node: '>=12.13'} + merge-stream@2.0.0: resolution: {integrity: sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==} @@ -5711,6 +5741,16 @@ packages: resolution: {integrity: sha512-ghgmKt5o4Tly5yEG/UJp8qTd0AN7Xalw4XBtDEKP655B699qMEtra1WlXeE6WIvdEG481JvRxULKsInq/iNysw==} engines: {node: '>=0.10.0'} + seroval-plugins@1.3.2: + resolution: {integrity: sha512-0QvCV2lM3aj/U3YozDiVwx9zpH0q8A60CTWIv4Jszj/givcudPb48B+rkU5D51NJ0pTpweGMttHjboPa9/zoIQ==} + engines: {node: '>=10'} + peerDependencies: + seroval: ^1.0 + + seroval@1.3.2: + resolution: {integrity: sha512-RbcPH1n5cfwKrru7v7+zrZvjLurgHhGyso3HTyGtRivGWgYjbOmGuivCQaORNELjNONoK35nj28EoWul9sb1zQ==} + engines: {node: '>=10'} + serve-static@1.16.2: resolution: {integrity: sha512-VqpjJZKadQB/PEbEwvFdO43Ax5dFBZ2UECszz8bQ7pi7wt//PWe1P6MN7eCnjsatYtBT6EuiClbjSWP2WrIoTw==} engines: {node: '>= 0.8.0'} @@ -5807,6 +5847,14 @@ packages: snake-case@3.0.4: resolution: {integrity: sha512-LAOh4z89bGQvl9pFfNF8V146i7o7/CqFPbqzYgP+yYzDIDeS9HaNFtXABamRW+AQzEVODcvE79ljJ+8a9YSdMg==} + solid-js@1.9.7: + resolution: {integrity: sha512-/saTKi8iWEM233n5OSi1YHCCuh66ZIQ7aK2hsToPe4tqGm7qAejU1SwNuTPivbWAYq7SjuHVVYxxuZQNRbICiw==} + + solid-refresh@0.6.3: + resolution: {integrity: sha512-F3aPsX6hVw9ttm5LYlth8Q15x6MlI/J3Dn+o3EQyRTtTxidepSTwAYdozt01/YA+7ObcciagGEyXIopGZzQtbA==} + peerDependencies: + solid-js: ^1.3 + source-map-js@1.2.1: resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==} engines: {node: '>=0.10.0'} @@ -6308,6 +6356,9 @@ packages: resolution: {integrity: sha512-DPSke0pXhTZgoF/d+WSt2QaKMCFSfx7QegxEWT+JOuHF5aWrKEn0G+ztjuJg/gG8/ItK+rbPCD/yNv8yyih6Cg==} hasBin: true + validate-html-nesting@1.2.3: + resolution: {integrity: sha512-kdkWdCl6eCeLlRShJKbjVOU2kFKxMF8Ghu50n+crEoyx+VKm3FxAxF9z4DCy6+bbTOqNW0+jcIYRnjoIRzigRw==} + validate-npm-package-name@5.0.1: resolution: {integrity: sha512-OljLrQ9SQdOUqTaQxqL5dEfZWrXExyyWsozYlAWFawPVNuD83igl7uJD2RTkNMbniIYgt8l81eCJGIdQF7avLQ==} engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0} @@ -6352,6 +6403,16 @@ packages: '@nuxt/kit': optional: true + vite-plugin-solid@2.11.7: + resolution: {integrity: sha512-5TgK1RnE449g0Ryxb9BXqem89RSy7fE8XGVCo+Gw84IHgPuPVP7nYNP6WBVAaY/0xw+OqfdQee+kusL0y3XYNg==} + peerDependencies: + '@testing-library/jest-dom': ^5.16.6 || ^5.17.0 || ^6.* + solid-js: ^1.7.2 + vite: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 + peerDependenciesMeta: + '@testing-library/jest-dom': + optional: true + vite-plugin-vue-devtools@7.7.7: resolution: {integrity: sha512-d0fIh3wRcgSlr4Vz7bAk4va1MkdqhQgj9ANE/rBhsAjOnRfTLs2ocjFMvSUOsv6SRRXU9G+VM7yMgqDb6yI4iQ==} engines: {node: '>=v14.21.3'} @@ -6403,6 +6464,14 @@ packages: yaml: optional: true + vitefu@1.1.1: + resolution: {integrity: sha512-B/Fegf3i8zh0yFbpzZ21amWzHmuNlLlmJT6n7bu5e+pCHUKQIfXSYokrqOBGEMMe9UG2sostKQF9mml/vYaWJQ==} + peerDependencies: + vite: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0-beta.0 + peerDependenciesMeta: + vite: + optional: true + vlq@1.0.1: resolution: {integrity: sha512-gQpnTgkubC6hQgdIcRdYGDSDc+SaujOdyesZQMv6JlfQee/9Mp0Qhnys6WxDWvQnL5WZdT7o2Ul187aSt0Rq+w==} @@ -6803,6 +6872,10 @@ snapshots: transitivePeerDependencies: - supports-color + '@babel/helper-module-imports@7.18.6': + dependencies: + '@babel/types': 7.28.2 + '@babel/helper-module-imports@7.27.1': dependencies: '@babel/traverse': 7.28.0 @@ -9385,6 +9458,16 @@ snapshots: '@types/babel__core': 7.20.5 '@types/babel__traverse': 7.20.7 + babel-plugin-jsx-dom-expressions@0.39.8(@babel/core@7.28.0): + dependencies: + '@babel/core': 7.28.0 + '@babel/helper-module-imports': 7.18.6 + '@babel/plugin-syntax-jsx': 7.27.1(@babel/core@7.28.0) + '@babel/types': 7.28.2 + html-entities: 2.3.3 + parse5: 7.3.0 + validate-html-nesting: 1.2.3 + babel-plugin-polyfill-corejs2@0.4.14(@babel/core@7.28.0): dependencies: '@babel/compat-data': 7.28.0 @@ -9473,6 +9556,11 @@ snapshots: babel-plugin-jest-hoist: 29.6.3 babel-preset-current-node-syntax: 1.1.0(@babel/core@7.28.0) + babel-preset-solid@1.9.6(@babel/core@7.28.0): + dependencies: + '@babel/core': 7.28.0 + babel-plugin-jsx-dom-expressions: 0.39.8(@babel/core@7.28.0) + bail@2.0.2: {} balanced-match@1.0.2: {} @@ -11124,6 +11212,8 @@ snapshots: dependencies: whatwg-encoding: 1.0.5 + html-entities@2.3.3: {} + html-void-elements@3.0.0: {} http-errors@2.0.0: @@ -11931,6 +12021,10 @@ snapshots: memorystream@0.3.1: {} + merge-anything@5.1.7: + dependencies: + is-what: 4.1.16 + merge-stream@2.0.0: {} merge2@1.4.1: {} @@ -13348,6 +13442,12 @@ snapshots: serialize-error@2.1.0: {} + seroval-plugins@1.3.2(seroval@1.3.2): + dependencies: + seroval: 1.3.2 + + seroval@1.3.2: {} + serve-static@1.16.2: dependencies: encodeurl: 2.0.0 @@ -13493,6 +13593,21 @@ snapshots: dot-case: 3.0.4 tslib: 2.8.1 + solid-js@1.9.7: + dependencies: + csstype: 3.1.3 + seroval: 1.3.2 + seroval-plugins: 1.3.2(seroval@1.3.2) + + solid-refresh@0.6.3(solid-js@1.9.7): + dependencies: + '@babel/generator': 7.28.0 + '@babel/helper-module-imports': 7.27.1 + '@babel/types': 7.28.2 + solid-js: 1.9.7 + transitivePeerDependencies: + - supports-color + source-map-js@1.2.1: {} source-map-support@0.5.21: @@ -14030,6 +14145,8 @@ snapshots: uuid@7.0.3: {} + validate-html-nesting@1.2.3: {} + validate-npm-package-name@5.0.1: {} vary@1.1.2: {} @@ -14093,6 +14210,19 @@ snapshots: - rollup - supports-color + vite-plugin-solid@2.11.7(solid-js@1.9.7)(vite@7.0.6(@types/node@22.16.5)(lightningcss@1.27.0)(terser@5.43.1)(yaml@2.8.0)): + dependencies: + '@babel/core': 7.28.0 + '@types/babel__core': 7.20.5 + babel-preset-solid: 1.9.6(@babel/core@7.28.0) + merge-anything: 5.1.7 + solid-js: 1.9.7 + solid-refresh: 0.6.3(solid-js@1.9.7) + vite: 7.0.6(@types/node@22.16.5)(lightningcss@1.27.0)(terser@5.43.1)(yaml@2.8.0) + vitefu: 1.1.1(vite@7.0.6(@types/node@22.16.5)(lightningcss@1.27.0)(terser@5.43.1)(yaml@2.8.0)) + transitivePeerDependencies: + - supports-color + vite-plugin-vue-devtools@7.7.7(rollup@4.45.3)(vite@7.0.6(@types/node@22.16.5)(lightningcss@1.27.0)(terser@5.43.1)(yaml@2.8.0))(vue@3.5.18(typescript@5.8.3)): dependencies: '@vue/devtools-core': 7.7.7(vite@7.0.6(@types/node@22.16.5)(lightningcss@1.27.0)(terser@5.43.1)(yaml@2.8.0))(vue@3.5.18(typescript@5.8.3)) @@ -14139,6 +14269,10 @@ snapshots: terser: 5.43.1 yaml: 2.8.0 + vitefu@1.1.1(vite@7.0.6(@types/node@22.16.5)(lightningcss@1.27.0)(terser@5.43.1)(yaml@2.8.0)): + optionalDependencies: + vite: 7.0.6(@types/node@22.16.5)(lightningcss@1.27.0)(terser@5.43.1)(yaml@2.8.0) + vlq@1.0.1: {} vscode-uri@3.1.0: {} From 9508d0f708e0b41e0806207882afdcead2bd9645 Mon Sep 17 00:00:00 2001 From: PauMAVA Date: Mon, 9 Dec 2024 10:22:13 +0100 Subject: [PATCH 2/5] Minify build --- bin/build/targets/solid-js/index.js | 1 - 1 file changed, 1 deletion(-) diff --git a/bin/build/targets/solid-js/index.js b/bin/build/targets/solid-js/index.js index e8222cca..d878263d 100644 --- a/bin/build/targets/solid-js/index.js +++ b/bin/build/targets/solid-js/index.js @@ -88,7 +88,6 @@ export default async (ctx, target) => { root: target.path, logLevel: 'silent', build: { - minify: false, outDir: 'dist', lib: { entry: path.join('src', 'index.ts'), From e99ccd4a7d26e31b6f896c6eb2a6289ac7a562f0 Mon Sep 17 00:00:00 2001 From: Pascal Jufer Date: Sat, 26 Jul 2025 23:44:42 +0200 Subject: [PATCH 3/5] Apply lint fixes --- bin/build/targets/solid-js/index.js | 14 +++++----- .../solid-js/resources/context-template.js | 4 +-- .../solid-js/resources/icon-template.js | 4 +-- packages/iconoir-solid-js/README.md | 8 +++--- packages/iconoir-solid-js/package.json | 26 +++++++++---------- 5 files changed, 28 insertions(+), 28 deletions(-) diff --git a/bin/build/targets/solid-js/index.js b/bin/build/targets/solid-js/index.js index d878263d..55e01b4d 100644 --- a/bin/build/targets/solid-js/index.js +++ b/bin/build/targets/solid-js/index.js @@ -1,11 +1,11 @@ import fs from 'node:fs/promises'; import path from 'node:path'; -import iconTemplate from './resources/icon-template.js'; -import contextTemplate from './resources/context-template.js'; -import { generateExport } from '../../lib/import-export.js'; import { build, defineConfig } from 'vite'; -import solidPlugin from 'vite-plugin-solid'; import dts from 'vite-plugin-dts'; +import solidPlugin from 'vite-plugin-solid'; +import { generateExport } from '../../lib/import-export.js'; +import contextTemplate from './resources/context-template.js'; +import iconTemplate from './resources/icon-template.js'; export default async (ctx, target) => { const promises = []; @@ -58,8 +58,8 @@ export default async (ctx, target) => { generateIconFile(icon.path, icon.pascalName, solidFileName), ); - const mainIndexComponentName = - variant === ctx.global.defaultVariant + const mainIndexComponentName + = variant === ctx.global.defaultVariant ? icon.pascalName : [icon.pascalName, 'as', icon.pascalNameVariant].join(' '); @@ -84,7 +84,7 @@ export default async (ctx, target) => { await Promise.all(promises); - let config = { + const config = { root: target.path, logLevel: 'silent', build: { diff --git a/bin/build/targets/solid-js/resources/context-template.js b/bin/build/targets/solid-js/resources/context-template.js index ece30135..b66bf8c4 100644 --- a/bin/build/targets/solid-js/resources/context-template.js +++ b/bin/build/targets/solid-js/resources/context-template.js @@ -1,4 +1,4 @@ -const template = () => { +function template() { return ` import { useContext, createContext, type JSX, splitProps, mergeProps } from "solid-js"; @@ -31,6 +31,6 @@ export function useIconoir() { return useContext(IconoirContext); } `; -}; +} export default template; diff --git a/bin/build/targets/solid-js/resources/icon-template.js b/bin/build/targets/solid-js/resources/icon-template.js index d59e481f..a0591cbd 100644 --- a/bin/build/targets/solid-js/resources/icon-template.js +++ b/bin/build/targets/solid-js/resources/icon-template.js @@ -1,8 +1,8 @@ import { generateImport } from '../../../lib/import-export.js'; -const injectProps = (svg) => { +function injectProps(svg) { return svg.replace(/]*)>/, ``); -}; +} export function getTemplate(iconoirContextPath, componentName, svgContent) { const useIconoirImport = generateImport(['useIconoir'], iconoirContextPath); diff --git a/packages/iconoir-solid-js/README.md b/packages/iconoir-solid-js/README.md index e268dcf2..5785a790 100644 --- a/packages/iconoir-solid-js/README.md +++ b/packages/iconoir-solid-js/README.md @@ -19,9 +19,9 @@ ```javascript import { Iconoir } from 'iconoir-solid-js'; -const App = () => { +function App() { return ; -}; +} export default App; ``` @@ -29,7 +29,7 @@ export default App; Icons can take any standard SVG properties as optional props, e.g. ```javascript - +; ``` Default values for the most common props are given below: @@ -46,7 +46,7 @@ Default values for the most common props are given below: Tired of specifying the same props for every single icon, every time you use them? So were we. Use IconoirProvider to set the default icon props for everything inside IconoirProvider. You can set any prop that an svg tag may have, more specifically any prop from `JSX.SvgSVGAttributes`. These props will be used then as defaults and can be overriden on any specific icon. ```tsx -import { IconoirProvider, Check } from 'iconoir-solid-js'; +import { Check, IconoirProvider } from 'iconoir-solid-js'; return ( diff --git a/packages/iconoir-solid-js/package.json b/packages/iconoir-solid-js/package.json index efe832d0..0024ccc8 100644 --- a/packages/iconoir-solid-js/package.json +++ b/packages/iconoir-solid-js/package.json @@ -2,23 +2,23 @@ "name": "iconoir-solid-js", "version": "7.10.1", "description": "solid-js library for Iconoir, the biggest open source icon library with tons of free icons.", - "keywords": [ - "icons", - "svg", - "library", - "solid-js" - ], + "license": "MIT", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/iconoir" + }, "homepage": "https://iconoir.com", "repository": { "type": "git", "url": "https://github.com/iconoir-icons/iconoir.git", "directory": "packages/iconoir-solid-js" }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/iconoir" - }, - "license": "MIT", + "keywords": [ + "icons", + "svg", + "library", + "solid-js" + ], "sideEffects": false, "exports": { ".": { @@ -40,8 +40,8 @@ "files": [ "dist" ], - "devDependencies": {}, "peerDependencies": { "solid-js": "^1.7 || ^1.8 || ^1.9" - } + }, + "devDependencies": {} } From 1ca1db9e770673db5f2070ebe8a324f3604b8569 Mon Sep 17 00:00:00 2001 From: Pascal Jufer Date: Sun, 27 Jul 2025 14:20:13 +0200 Subject: [PATCH 4/5] Don't fail if src doesn't exist yet --- bin/build/targets/solid-js/index.js | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/bin/build/targets/solid-js/index.js b/bin/build/targets/solid-js/index.js index 55e01b4d..0dc86612 100644 --- a/bin/build/targets/solid-js/index.js +++ b/bin/build/targets/solid-js/index.js @@ -11,11 +11,8 @@ export default async (ctx, target) => { const promises = []; const outDir = path.join(target.path, 'src'); - const distDir = path.join(target.path, 'dist'); - - await fs.rm(outDir, { recursive: true }); - await fs.rm(distDir, { recursive: true }); + await fs.rm(outDir, { recursive: true, force: true }); await fs.mkdir(outDir, { recursive: true }); await fs.writeFile( @@ -99,7 +96,6 @@ export default async (ctx, target) => { rollupOptions: { external: ['solid-js'], }, - emptyOutDir: false, }, plugins: [ solidPlugin(), From 34f4aa3b6ce07ee17bd5d52b1bab67782adae960 Mon Sep 17 00:00:00 2001 From: Pascal Jufer Date: Sun, 27 Jul 2025 14:25:46 +0200 Subject: [PATCH 5/5] Adjust license --- packages/iconoir-solid-js/LICENSE | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/iconoir-solid-js/LICENSE b/packages/iconoir-solid-js/LICENSE index 06eb1f09..322c18f8 100644 --- a/packages/iconoir-solid-js/LICENSE +++ b/packages/iconoir-solid-js/LICENSE @@ -1,6 +1,6 @@ MIT License -Copyright (c) 2021 Daniel Martin +Copyright (c) 2025 Iconoir (https://github.com/iconoir-icons) Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal