Generate dynamic imports for icons-react (#1081)

Co-authored-by: Paweł Kuna <1282324+codecalm@users.noreply.github.com>
tabler · Sep 27, 2024 · 7d1f101 · 7d1f101
1 parent 1fbb588
commit 7d1f101
Show file tree

Hide file tree

Showing 7 changed files with 322 additions and 265 deletions.
diff --git a/.build/build-icons.mjs b/.build/build-icons.mjs
@@ -1,7 +1,7 @@
-import fs from 'fs-extra'
-import path from 'path'
-import { PACKAGES_DIR, getAliases, toPascalCase, getAllIcons } from './helpers.mjs'
-import { stringify } from 'svgson'
+import fs from 'fs-extra';
+import path from 'path';
+import { PACKAGES_DIR, getAliases, toPascalCase, getAllIcons } from './helpers.mjs';
+import { stringify } from 'svgson';
 
 /**
  * Build icons
@@ -22,62 +22,67 @@ export const buildJsIcons = ({
  key = true,
  pascalCase = false,
  pascalName = true,
- indexFile = 'icons.ts'
+ indexFile = 'icons.ts',
 }) => {
  const DIST_DIR = path.resolve(PACKAGES_DIR, name);
  const aliases = getAliases(),
- allIcons = getAllIcons(false, true)
+ allIcons = getAllIcons(false, true);
 
- let index = []
+ let index = [];
  Object.entries(allIcons).forEach(([type, icons]) => {
  icons.forEach((icon, i) => {
- process.stdout.write(`Building \`${name}\` ${type} ${i}/${icons.length}: ${icon.name.padEnd(42)}\r`)
+ process.stdout.write(
+ `Building \`${name}\` ${type} ${i}/${icons.length}: ${icon.name.padEnd(42)}\r`,
+ );
 
  const children = icon.obj.children
- .map(({
- name,
- attributes
- }, i) => {
+ .map(({ name, attributes }, i) => {
  if (key) {
- attributes.key = `svg-${i}`
+ attributes.key = `svg-${i}`;
  }
 
  if (pascalCase) {
- attributes.strokeWidth = attributes['stroke-width']
- delete attributes['stroke-width']
+ attributes.strokeWidth = attributes['stroke-width'];
+ delete attributes['stroke-width'];
  }
 
- return [name, attributes]
+ return [name, attributes];
  })
  .filter((i) => {
- const [name, attributes] = i
- return !attributes.d || attributes.d !== 'M0 0h24v24H0z'
- })
+ const [name, attributes] = i;
+ return !attributes.d || attributes.d !== 'M0 0h24v24H0z';
+ });
 
  const iconName = `${icon.name}${type !== 'outline' ? `-${type}` : ''}`,
- iconNamePascal = `${icon.namePascal}${type !== 'outline' ? toPascalCase(type) : ''}`
+ iconNamePascal = `${icon.namePascal}${type !== 'outline' ? toPascalCase(type) : ''}`;
 
  let component = componentTemplate({
  type,
  name: iconName,
  namePascal: iconNamePascal,
  children,
  stringify,
- svg: icon.content
- })
-
- let filePath = path.resolve(DIST_DIR, 'src/icons', `${pascalName ? iconNamePascal : iconName}.${extension}`)
- fs.writeFileSync(filePath, component, 'utf-8')
-
- index.push(indexItemTemplate({
- type,
- name: iconName,
- namePascal: iconNamePascal
- }))
- })
- })
-
- fs.writeFileSync(path.resolve(DIST_DIR, `src/icons/${indexFile}`), index.join('\n'), 'utf-8')
+ svg: icon.content,
+ });
+
+ let filePath = path.resolve(
+ DIST_DIR,
+ 'src/icons',
+ `${pascalName ? iconNamePascal : iconName}.${extension}`,
+ );
+ fs.writeFileSync(filePath, component, 'utf-8');
+
+ index.push(
+ indexItemTemplate({
+ type,
+ name: iconName,
+ namePascal: iconNamePascal,
+ }),
+ );
+ });
+ });
+
+ fs.writeFileSync(path.resolve(DIST_DIR, `src/icons/${indexFile}`), index.join('\n'), 'utf-8');
 
  // Write aliases
  let aliasesStr = '';
@@ -87,28 +92,61 @@ export const buildJsIcons = ({
  from,
  to,
  fromPascal: toPascalCase(from),
- toPascal: toPascalCase(to)
- })
- })
+ toPascal: toPascalCase(to),
+ });
+ });
  }
 
- fs.writeFileSync(path.resolve(DIST_DIR, `./src/aliases.ts`), aliasesStr || `export {};`, 'utf-8')
-}
+ fs.writeFileSync(path.resolve(DIST_DIR, `./src/aliases.ts`), aliasesStr || `export {};`, 'utf-8');
+};
 
 export const buildIconsList = (name) => {
  const DIST_DIR = path.resolve(PACKAGES_DIR, name);
- const allIcons = getAllIcons(false, true)
+ const allIcons = getAllIcons(false, true);
+
+ let index = [];
+ Object.entries(allIcons).forEach(([type, icons]) => {
+ icons.forEach((icon, i) => {
+ process.stdout.write(
+ `Building \`${name}\` ${type} ${i}/${icons.length}: ${icon.name.padEnd(42)}\r`,
+ );
+
+ const iconName = `${icon.name}${type !== 'outline' ? `-${type}` : ''}`;
+
+ index.push(iconName);
+ });
+ });
+
+ fs.writeFileSync(
+ path.resolve(DIST_DIR, `./src/icons-list.ts`),
+ `export default ${JSON.stringify(index, null, 2)};`,
+ 'utf-8',
+ );
+};
+
+export const buildIconsDynamicImport = (name) => {
+ const DIST_DIR = path.resolve(PACKAGES_DIR, name);
+ const allIcons = getAllIcons(false, true);
 
- let index = []
+ let dynamicImportString = 'export default {';
  Object.entries(allIcons).forEach(([type, icons]) => {
  icons.forEach((icon, i) => {
- process.stdout.write(`Building \`${name}\` ${type} ${i}/${icons.length}: ${icon.name.padEnd(42)}\r`)
+ process.stdout.write(
+ `Building \`${name}\` ${type} ${i}/${icons.length}: ${icon.name.padEnd(42)}\r`,
+ );
+
+ const iconName = `${icon.name}${type !== 'outline' ? `-${type}` : ''}`,
+ iconNamePascal = `${icon.namePascal}${type !== 'outline' ? toPascalCase(type) : ''}`;
 
- const iconName = `${icon.name}${type !== 'outline' ? `-${type}` : ''}`
+ dynamicImportString += ` '${iconName}': () => import('./icons/${iconNamePascal}'),\n`;
+ });
+ });
 
- index.push(iconName)
- })
- })
+ dynamicImportString += '};\n';
 
- fs.writeFileSync(path.resolve(DIST_DIR, `./src/icons-list.ts`), `export default ${JSON.stringify(index, null, 2)};`, 'utf-8')
-}
+ fs.writeFileSync(
+ path.resolve(DIST_DIR, `./src/dynamic-imports.ts`),
+ dynamicImportString,
+ 'utf-8',
+ );
+};