feat: Add Preact (iconoir-preact)

bin/build/index.js

@@ -27,6 +27,10 @@ const targets = {
     title: 'React library',
     path: 'packages/iconoir-react',
   },
+  'preact': {
+    title: 'Preact library',
+    path: 'packages/iconoir-preact',
+  },
   'react-native': {
     title: 'React Native library',
     target: 'react',

bin/build/targets/preact/index.js

@@ -0,0 +1,244 @@
+import { mkdir, readFile, rm, writeFile } from 'node:fs/promises';
+import { join } from 'node:path';
+import { transform as transformSVG } from '@svgr/core';
+import { transform as transformJSX } from 'esbuild';
+import {
+  dtsContext,
+  esmContext,
+} from './templates/context.mjs';
+import {
+  cjsExport,
+  dtsExport,
+  esmExport,
+  indexDTS,
+} from './templates/index.mjs';
+import { license } from './templates/license.mjs';
+import { packageJson } from './templates/package.mjs';
+import { readme } from './templates/readme.mjs';
+
+async function setupDist(distPath) {
+  await rm(distPath, { recursive: true, force: true });
+
+  const distDir = join(distPath, 'dist');
+  await mkdir(distDir, { recursive: true });
+
+  const cjsDist = join(distDir, 'cjs');
+  const esmDist = join(distDir, 'esm');
+
+  await mkdir(cjsDist, { recursive: true });
+  await mkdir(esmDist, { recursive: true });
+}
+
+async function addRootFiles(distPath) {
+  const distDir = distPath;
+
+  const readmePath = join(distDir, 'README.md');
+  const licensePath = join(distDir, 'LICENSE');
+  const packagePath = join(distDir, 'package.json');
+
+  const packageFile = await readFile('package.json');
+  const packageMeta = JSON.parse(packageFile);
+  const packageJsonContent = packageJson(packageMeta.version);
+
+  await writeFile(readmePath, readme);
+  await writeFile(licensePath, license);
+  await writeFile(packagePath, packageJsonContent);
+}
+
+async function buildIcons(distPath, icons) {
+  const variants = Object.keys(icons);
+
+  const distDir = join(distPath, 'dist');
+  const esmDist = join(distDir, 'esm');
+  const cjsDist = join(distDir, 'cjs');
+
+  let esmIndex = '';
+  let cjsIndex = '';
+  let dtsIndex = indexDTS;
+
+  for (const variant of variants) {
+    const esmPath = join(esmDist, variant);
+    const cjsPath = join(cjsDist, variant);
+
+    let variantEsmIndex = '';
+    let variantCjsIndex = '';
+    let variantDtsIndex = indexDTS;
+
+    await mkdir(esmPath, { recursive: true });
+    await mkdir(cjsPath, { recursive: true });
+
+    for (const icon of icons[variant]) {
+      const svgContent = await readFile(icon.path);
+
+      const jsxContent = await transformSVG(svgContent, {
+        plugins: ['@svgr/plugin-jsx'],
+        icon: true,
+        jsxRuntime: 'classic-preact',
+        importSource: 'preact',
+      }, { componentName: icon.pascalNameVariant });
+
+      const esmContent = (await transformJSX(jsxContent, {
+        loader: 'jsx',
+        format: 'esm',
+        target: 'es2020',
+        jsxFactory: 'h',
+        jsxFragment: 'Fragment',
+      })).code;
+
+      const cjsContent = (await transformJSX(jsxContent, {
+        loader: 'jsx',
+        format: 'cjs',
+        target: 'es2020',
+        jsxFactory: 'h',
+        jsxFragment: 'Fragment',
+      })).code;
+
+      const esmFilePath = join(esmPath, `${icon.pascalName}.mjs`);
+      const cjsFilePath = join(cjsPath, `${icon.pascalName}.js`);
+
+      await writeFile(esmFilePath, esmContent);
+      await writeFile(cjsFilePath, cjsContent);
+
+      esmIndex += esmExport(
+        `./${variant}/${icon.pascalName}.mjs`,
+        icon.pascalNameVariant,
+      );
+
+      cjsIndex += cjsExport(
+        `./${variant}/${icon.pascalName}.js`,
+        icon.pascalNameVariant,
+      );
+
+      dtsIndex += dtsExport(
+        `./${variant}/${icon.pascalName}`,
+        icon.pascalNameVariant,
+      );
+
+      variantEsmIndex += esmExport(
+        `./${icon.pascalName}.mjs`,
+        icon.pascalNameVariant,
+      );
+
+      variantCjsIndex += cjsExport(
+        `./${icon.pascalName}.js`,
+        icon.pascalNameVariant,
+      );
+
+      variantDtsIndex += dtsExport(
+        `./${icon.pascalName}`,
+        icon.pascalNameVariant,
+      );
+    }
+
+    await writeFile(join(esmPath, 'index.mjs'), variantEsmIndex);
+    await writeFile(join(cjsPath, 'index.js'), variantCjsIndex);
+
+    const variantDtsPath = join(distDir, variant);
+    await mkdir(variantDtsPath, { recursive: true });
+
+    const variantDtsFilePath = join(variantDtsPath, 'index.d.ts');
+    await writeFile(variantDtsFilePath, variantDtsIndex);
+  }
+
+  await writeFile(join(esmDist, 'index.mjs'), esmIndex);
+  await writeFile(join(cjsDist, 'index.js'), cjsIndex);
+  await writeFile(join(distDir, 'index.d.ts'), dtsIndex);
+}
+
+async function addDefaultVariants(distPath, icons, defaultVariant) {
+  const distDir = join(distPath, 'dist');
+  const esmDist = join(distDir, 'esm');
+  const cjsDist = join(distDir, 'cjs');
+
+  const esmIndexPath = join(esmDist, 'index.mjs');
+  const cjsIndexPath = join(cjsDist, 'index.js');
+  const dtsIndexPath = join(distDir, 'index.d.ts');
+
+  let esmIndex = await readFile(esmIndexPath, 'utf-8');
+  let cjsIndex = await readFile(cjsIndexPath, 'utf-8');
+  let dtsIndex = await readFile(dtsIndexPath, 'utf-8');
+
+  for (const icon of icons[defaultVariant]) {
+    esmIndex += esmExport(
+      `./${defaultVariant}/${icon.pascalName}.mjs`,
+      icon.pascalName,
+    );
+
+    cjsIndex += cjsExport(
+      `./${defaultVariant}/${icon.pascalName}.js`,
+      icon.pascalName,
+    );
+
+    dtsIndex += dtsExport(
+      `./${defaultVariant}/${icon.pascalName}`,
+      icon.pascalName,
+    );
+  }
+
+  await writeFile(esmIndexPath, esmIndex);
+  await writeFile(cjsIndexPath, cjsIndex);
+  await writeFile(dtsIndexPath, dtsIndex);
+}
+
+async function addContexts(distPath) {
+  const distDir = join(distPath, 'dist');
+  const esmDist = join(distDir, 'esm');
+  const cjsDist = join(distDir, 'cjs');
+
+  const esmContextPath = join(esmDist, 'context.mjs');
+  const cjsContextPath = join(cjsDist, 'context.js');
+  const dtsContextPath = join(distDir, 'context.d.ts');
+
+  const jsxContext = esmContext();
+
+  const esmContextContent = (await transformJSX(jsxContext, {
+    loader: 'jsx',
+    format: 'esm',
+    target: 'es2020',
+    jsxFactory: 'h',
+    jsxFragment: 'Fragment',
+  })).code;
+
+  const cjsContextContent = (await transformJSX(jsxContext, {
+    loader: 'jsx',
+    format: 'cjs',
+    target: 'es2020',
+    jsxFactory: 'h',
+    jsxFragment: 'Fragment',
+  })).code;
+
+  await writeFile(esmContextPath, esmContextContent);
+  await writeFile(cjsContextPath, cjsContextContent);
+  await writeFile(dtsContextPath, dtsContext());
+
+  const esmIndexPath = join(esmDist, 'index.mjs');
+  const cjsIndexPath = join(cjsDist, 'index.js');
+  const dtsIndexPath = join(distDir, 'index.d.ts');
+
+  let esmIndex = await readFile(esmIndexPath, 'utf-8');
+  let cjsIndex = await readFile(cjsIndexPath, 'utf-8');
+  let dtsIndex = await readFile(dtsIndexPath, 'utf-8');
+
+  esmIndex += '\nexport * from "./context.mjs";\n';
+  cjsIndex += '\nObject.assign(exports, require("./context.js"));\n';
+  dtsIndex += '\nexport * from "./context";\n';
+
+  await writeFile(esmIndexPath, esmIndex);
+  await writeFile(cjsIndexPath, cjsIndex);
+  await writeFile(dtsIndexPath, dtsIndex);
+}
+
+export default async function build(...args) {
+  const [
+    { icons, global: { defaultVariant } },
+    { path: distPath },
+  ] = args;
+
+  await setupDist(distPath);
+  await addRootFiles(distPath);
+  await buildIcons(distPath, icons);
+  await addDefaultVariants(distPath, icons, defaultVariant);
+
+  if (false)
+    await addContexts(distPath);
+}

bin/build/targets/preact/templates/context.mjs

@@ -0,0 +1,67 @@
+export function esmContext() {
+  return `
+import { h, createContext } from "preact";
+
+export const IconoirContext =
+  createContext({});
+
+export function IconoirProvider({
+  iconProps,
+  children
+}) {
+  return (
+    <IconoirContext.Provider value={iconProps || {}}>
+      {children}
+    </IconoirContext.Provider>
+  );
+}
+`;
+}
+
+export function cjsContext() {
+  return `
+"use strict";
+
+const preact = require("preact");
+
+const IconoirContext =
+  preact.createContext({});
+
+function IconoirProvider({
+  iconProps,
+  children
+}) {
+  return (
+    preact.h(
+      IconoirContext.Provider,
+      { value: iconProps || {} },
+      children
+    )
+  );
+}
+
+exports.IconoirContext = IconoirContext;
+exports.IconoirProvider = IconoirProvider;
+`;
+}
+
+export function dtsContext() {
+  return `
+import { ComponentChildren, JSX } from "preact";
+
+export type IconoirContextValue =
+  Partial<JSX.SVGAttributes<SVGSVGElement>>;
+
+export declare const IconoirContext:
+  import("preact").Context<IconoirContextValue>;
+
+export interface IconoirProviderProps {
+  iconProps?: IconoirContextValue;
+  children: ComponentChildren;
+}
+
+export declare function IconoirProvider(
+  props: IconoirProviderProps
+): JSX.Element;
+`;
+}

bin/build/targets/preact/templates/index.mjs

@@ -0,0 +1,14 @@
+export const indexDTS = `import { FunctionalComponent, JSX } from 'preact';\n`;
+
+export function esmExport(module, name) {
+  return `export { default as ${name} } from "${module}";\n`;
+}
+
+export function cjsExport(module, name) {
+  return `exports.${name} = require("${module}").default;\n`;
+}
+
+export function dtsExport(module, name) {
+  const typeName = `FunctionalComponent<JSX.SVGAttributes<SVGSVGElement>>`;
+  return `export const ${name}: ${typeName};\n`;
+}

bin/build/targets/preact/templates/license.mjs

@@ -0,0 +1,22 @@
+export const license = `MIT License
+
+Copyright (c) 2026 iconoir-icons, AttAditya
+
+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.
+`;