core package and build changes

packages/icons/build.mjs

@@ -1,61 +1,47 @@
 import fs from 'fs'
-import { createDirectory, readSvgs } from '../../.build/helpers.mjs'
-import { buildIcons } from '../../.build/build-icons.mjs'
-import { stringify } from 'svgson'
+import path from 'path'
+import { fileURLToPath } from 'url'
 
-const svgFiles = readSvgs()
+const svgFiles = fs.readdirSync(path.resolve(path.dirname(fileURLToPath(import.meta.url)), './svg'))
+  .filter((file) => path.extname(file) === '.svg')
+  .map(svgFile => {
+    const name = path.basename(svgFile, '.svg'),
+        contents = fs.readFileSync(path.join(path.resolve(path.dirname(fileURLToPath(import.meta.url)), './svg'), svgFile), 'utf-8').trim().replace('<path stroke="none" d="M0 0h24v24H0z" fill="none"/>', '')
 
-const buildSprite = () => {
+    return {
+      name,
+      contents
+    };
+  });
+
+// Build sprites
+(() => {
   let svgContent = ''
   svgFiles.forEach(function(file, i) {
     const svgFileContent = file.contents.replace(/<svg[^>]+>/g, '').replace(/<\/svg>/g, '').replace(/\n+/g, '').replace(/>\s+</g, '><').trim()
     svgContent += `<symbol id="tabler-${file.name}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">${svgFileContent}</symbol>`
   })
 
-  let svg = `<svg xmlns="http://www.w3.org/2000/svg"><defs>${svgContent}</defs></svg>`
+  let svg = `<svg xmlns="http://www.w3.org/2000/svg"><defs>${svgContent}</defs></svg>` 
 
-  fs.writeFileSync('tabler-sprite.svg', svg)
-  fs.writeFileSync('tabler-sprite-nostroke.svg', svg.replace(/stroke-width="2"\s/g, ''))
-}
+  fs.writeFileSync('./src/tabler-sprite.svg', svg)
+  fs.writeFileSync('./src/tabler-sprite-nostroke.svg', svg.replace(/stroke-width="2"\s/g, ''))
+})();
 
-const buildNodes = () => {
-  const iconNodes = svgFiles.reduce((acc, { name, obj }) => {
-    acc[name] = obj.children.map(({ name, attributes }) => [name, attributes]);
+// Buiuld nodes
+(() => {
+  const iconNodes = svgFiles.reduce((acc, { name, contents }) => {
+    var lines = contents.split('\n');
+    lines.splice(0,1);
+    var trimmedContent = lines.join('\n').replace('</svg>', '').replace(/(\r\n|\n|\r)/gm, '').replace(/(\s){2,}/g, '');
+
+    acc[name] = trimmedContent;
 
     return acc;
   }, {});
 
-  const iconNodesStringified = JSON.stringify(iconNodes, null, 2);
+  const iconNodesStringified = JSON.stringify(iconNodes, null, 2);   
 
-  fs.writeFileSync(`./tabler-nodes.json`, iconNodesStringified);
-}
+  fs.writeFileSync(`./src/tabler-nodes.json`, iconNodesStringified);
+})();
 
-const componentTemplate = ({
-  namePascal,
-  svg
-}) => `\
-export default ${namePascal} => \`${svg.contents}\`;`;
-
-const indexItemTemplate = ({
-  name,
-  namePascal
-}) => `export { default as ${namePascal} } from './icons/${namePascal}';`
-
-const typeDefinitionsTemplate = () => `// Generated icons`
-
-const indexTypeTemplate = ({
-  namePascal
-}) => `export declare const ${namePascal}: string;`
-
-
-
-buildSprite()
-buildNodes()
-buildIcons({
-  name: 'icons',
-  componentTemplate,
-  indexItemTemplate,
-  typeDefinitionsTemplate,
-  indexTypeTemplate,
-  pretty: false
-})

packages/icons/package.json

@@ -16,10 +16,10 @@
   "files": [
     "dist/*",
     "tags.json",
-    "tabler-nodes.json",
-    "icons/*",
-    "tabler-sprite.svg",
-    "tabler-sprite-nostroke.svg"
+    "src/tabler-nodes.json",
+    "svg/*",
+    "src/tabler-sprite.svg",
+    "src/tabler-sprite-nostroke.svg"
   ],
   "types": "dist/index.d.ts",
   "homepage": "https://tabler-icons.io",
@@ -32,7 +32,7 @@
   },
   "scripts": {
     "clean": "rm -rf dist",
-    "build": "rm -rf dist && rollup -c ./rollup.config.mjs",
+    "build": "rm -rf dist && node build.mjs && rollup -c ./rollup.config.mjs",
     "test": "jest --env=jsdom"
   },
   "keywords": [
@@ -46,6 +46,7 @@
   ],
   "devDependencies": {
     "@atomico/rollup-plugin-sizes": "^1.1.4",
+    "@rollup/plugin-json": "^6.0.0",
     "@rollup/plugin-typescript": "8.3.3",
     "@types/node": "^18.6.5",
     "babel-jest": "^29.4.1",

packages/icons/rollup.config.mjs

@@ -5,6 +5,7 @@ import esbuild from 'rollup-plugin-esbuild'
 import dts from "rollup-plugin-dts";
 import pkg from "./package.json" assert { type: "json" }
 import typescript from "@rollup/plugin-typescript";
+import json from '@rollup/plugin-json';
 
 // const packageName = '@tabler/icons';
 // const outputFileName = 'tabler-icons';
@@ -102,11 +103,12 @@ export default [
         filename: `stats/${pkg.name}.html`
       }),
       typescript({ tsconfig: "./tsconfig.json" }),
+      json()
     ],
   },
   {
     input: "dist/esm/types/index.d.ts",
     output: [{ file: "dist/index.d.ts", format: "esm" }],
-    plugins: [dts()],
+    plugins: [dts(), json()],
   },
 ];

packages/icons/src/tabler-icons.ts

@@ -1,32 +1,14 @@
 import TablerIcon from './tabler-icon';
-// import fs from 'fs'
-// import path, { basename } from 'path'
+import tablerNodes from './tabler-nodes.json';
 
-// const iconNodes = fs.readdirSync(path.resolve(__dirname, '../icons'))
-//   .filter((file) => path.extname(file) === '.svg')
-//   .map(svgFile => {
-//     return {
-//       name: basename(svgFile, '.svg'),
-//       content: fs.readFileSync(path.join(path.resolve(__dirname, '../icons'), svgFile), 'utf-8').trim().replace('<path stroke="none" d="M0 0h24v24H0z" fill="none"/>', '')
-//     };
-//   })
+// TODO [!] Error: Could not resolve './tabler-nodes.json' from dist/esm/types/tabler-icons.d.ts
+//type iconName = keyof typeof tablerNodes
 
-const iconNodes = [
-  {
-    name: 'activity',
-    content: '<path d="M3 12h4l3 8l4 -16l3 8h4" />'
-  },
-  {
-    name: 'abc',
-    content: '<path d="M3 16v-6a2 2 0 1 1 4 0v6" /><path d="M3 13h4" /><path d="M10 8v6a2 2 0 1 0 4 0v-1a2 2 0 1 0 -4 0v1" /><path d="M20.732 12a2 2 0 0 0 -3.732 1v1a2 2 0 0 0 3.726 1.01" />',
-  }
-]
-
-const icons: Record<string, TablerIcon> = iconNodes
-  .map(iconNode => new TablerIcon(iconNode.name, iconNode.content))
+const icons: Record<string, TablerIcon> = Object.keys(tablerNodes)
+  .map(iconNode => new TablerIcon(iconNode, tablerNodes[iconNode]))
   .reduce((object, icon) => {
     object[icon.name] = icon;
     return object;
-  }, {});
+  }, {} as Record<string, TablerIcon>);
 
 export default icons

packages/icons/tsconfig.json

@@ -1,5 +1,5 @@
 {
-  "include": ["src/**/*"],
+  "include": ["src/**/*", "src/**/*.json"],
   "compilerOptions": {
     "rootDir": "src",
     "allowJs": true,
@@ -9,6 +9,7 @@
     "declarationMap": true,
     "declarationDir": "types",
     "esModuleInterop": true,
-    "resolveJsonModule": true
+    "resolveJsonModule": true,
+    "moduleResolution": "node"
   }
 }

pnpm-lock.yaml

@@ -108,6 +108,7 @@ importers:
   packages/icons:
     specifiers:
       '@atomico/rollup-plugin-sizes': ^1.1.4
+      '@rollup/plugin-json': ^6.0.0
       '@rollup/plugin-typescript': 8.3.3
       '@types/node': ^18.6.5
       babel-jest: ^29.4.1
@@ -122,6 +123,7 @@ importers:
       typescript: ^4.9.5
     devDependencies:
       '@atomico/rollup-plugin-sizes': 1.1.4_rollup@2.78.1
+      '@rollup/plugin-json': 6.0.0_rollup@2.78.1
       '@rollup/plugin-typescript': 8.3.3_4oxn4kkd532fbh3a5t6trtlwbi
       '@types/node': 18.14.6
       babel-jest: 29.4.3
@@ -3725,6 +3727,19 @@ packages:
       rollup: 2.78.1
     dev: true
 
+  /@rollup/plugin-json/6.0.0_rollup@2.78.1:
+    resolution: {integrity: sha512-i/4C5Jrdr1XUarRhVu27EEwjt4GObltD7c+MkCIpO2QIbojw8MUs+CCTqOphQi3Qtg1FLmYt+l+6YeoIf51J7w==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      rollup: ^1.20.0||^2.0.0||^3.0.0
+    peerDependenciesMeta:
+      rollup:
+        optional: true
+    dependencies:
+      '@rollup/pluginutils': 5.0.2_rollup@2.78.1
+      rollup: 2.78.1
+    dev: true
+
   /@rollup/plugin-node-resolve/9.0.0_rollup@2.78.1:
     resolution: {integrity: sha512-gPz+utFHLRrd41WMP13Jq5mqqzHL3OXrfj3/MkSyB6UBIcuNt9j60GCbarzMzdf1VHFpOxfQh/ez7wyadLMqkg==}
     engines: {node: '>= 10.0.0'}
@@ -3778,6 +3793,21 @@ packages:
       picomatch: 2.3.1
     dev: true
 
+  /@rollup/pluginutils/5.0.2_rollup@2.78.1:
+    resolution: {integrity: sha512-pTd9rIsP92h+B6wWwFbW8RkZv4hiR/xKsqre4SIuAOaOEQRxi0lqLke9k2/7WegC85GgUs9pjmOjCUi3In4vwA==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      rollup: ^1.20.0||^2.0.0||^3.0.0
+    peerDependenciesMeta:
+      rollup:
+        optional: true
+    dependencies:
+      '@types/estree': 1.0.0
+      estree-walker: 2.0.2
+      picomatch: 2.3.1
+      rollup: 2.78.1
+    dev: true
+
   /@sinclair/typebox/0.25.24:
     resolution: {integrity: sha512-XJfwUVUKDHF5ugKwIcxEgc9k8b7HbznCp6eUfWgu710hMPNIO4aw4/zB5RogDQz8nd6gyCDpU9O/m6qYEWY6yQ==}
     dev: true