Implement support for SolidJS

.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/*

bin/build/index.js

@@ -32,6 +32,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',

bin/build/lib/ts.js

@@ -1,4 +1,5 @@
 import ts from 'typescript';
+import * as pathlib from 'path';
 
 /**
  *
@@ -16,17 +17,22 @@ export function getDts(path, content, options) {
   const _readFile = host.readFile;
 
   host.readFile = (filename) => {
-    if (filename === path)
-      return content;
+    const normalizedFilename = pathlib.normalize(filename).replace(/\\/g, '/');
+    const normalizedPath = pathlib.normalize(path).replace(/\\/g, '/');
+
+    if (normalizedFilename === normalizedPath) return content;
 
     return _readFile(filename);
   };
 
   const dtsFilename = path.replace(/\.(m|c)?(ts|js)x?$/, '.d.$1ts');
 
   host.writeFile = (filename, contents) => {
-    if (filename === dtsFilename)
-      output = contents;
+    const normalizedFilename = pathlib.normalize(filename).replace(/\\/g, '/');
+    const normalizedDtsFilename = pathlib
+      .normalize(dtsFilename)
+      .replace(/\\/g, '/');
+    if (normalizedFilename === normalizedDtsFilename) output = contents;
   };
 
   const program = ts.createProgram([path], options, host);

bin/build/targets/solid-js/index.js

@@ -0,0 +1,120 @@
+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: {
+      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);
+  }
+};

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<JSX.SvgSVGAttributes<SVGSVGElement>>;
+
+export const IconoirContext = createContext<IconoirContextValue>({});
+
+export interface IconoirProviderProps extends Partial<JSX.SvgSVGAttributes<SVGSVGElement>> {
+  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 (
+    <IconoirContext.Provider value={mergedProps}>
+      {props.children}
+    </IconoirContext.Provider>
+  );
+}
+
+export function useIconoir() {
+  return useContext(IconoirContext);
+}
+`;
+};
+
+export default template;

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(/<svg([^>]*)>/, `<svg$1 {...rest} ref={props.ref}>`);
+};
+
+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<JSX.SvgSVGAttributes<SVGSVGElement>>) => {
+    const context = useIconoir();
+    const allProps = mergeProps(context || {}, props);
+    const  [_, rest] = splitProps(allProps, ["ref"]);
+    return ${injectProps(svgContent)};
+  };
+
+  export default ${componentName};
+  `;
+}
+
+export default getTemplate;

bin/prepublish.js

@@ -18,6 +18,7 @@ if (!newVersion) {
 publishNpmPackage('iconoir');
 publishNpmPackage('iconoir-react');
 publishNpmPackage('iconoir-react-native');
+publishNpmPackage('iconoir-solid-js');
 publishNpmPackage('iconoir-vue');
 publishPubPackage('iconoir-flutter');
 

package.json

@@ -57,7 +57,8 @@
     "types-tsconfig": "2.1.1",
     "typescript": "~5.7.2",
     "vite": "^6.0.4",
-    "vite-plugin-dts": "^4.4.0"
+    "vite-plugin-dts": "^4.4.0",
+    "vite-plugin-solid": "^2.11.0"
   },
   "pnpm": {
     "packageExtensions": {

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.

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 <Iconoir />;
+};
+
+export default App;
+```
+
+Icons can take any standard SVG properties as optional props, e.g.
+
+```javascript
+<Iconoir color="red" height={36} width={36} />
+```
+
+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<SVGSVGElement>`. 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 (
+  <IconoirProvider color="#AAAAAA" stroke-width="1" width="1em" height="1em">
+    <SomeOtherContainer>
+      <Check />
+      <Check color="#BBBBBB" />
+    </SomeOtherContainer>
+  </IconoirProvider>
+);
+```
+
+## 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 <UndoCircle></UndoCircle>;
+```
+
+```tsx
+import { UndoCircle } from 'iconoir-solid-js/solid';
+
+// This is a solid icon
+return <UndoCircle></UndoCircle>;
+```
+
+```tsx
+import { UndoCircle, UndoCircleSolid } from 'iconoir-solid-js';
+
+// These are regular and solid icons
+return (
+  <>
+    <UndoCircle></UndoCircle>
+    <UndoCircleSolid></UndoCircleSolid>
+  </>
+);
+```