feat: Generate individual icons (#39)

* Generate individual icons

* Fix SSR for elements

elements.eik.js

@@ -1,12 +1,23 @@
-import esbuild from 'esbuild';
+import esbuild from "esbuild";
+import { glob } from "glob";
+import chalk from "chalk";
 
-await esbuild.build({
-  entryPoints: ['elements/index.js'],
-  bundle: true,
-  outfile: 'dist/elements/icons.js',
-  format: 'esm',
-  sourcemap: true,
-  target: 'es2017',
-  minify: true,
-  external: ['lit'],
+const files = glob.sync("elements/*.js");
+
+files.forEach(async (filePath) => {
+  console.log(`${chalk.cyan("elements")}: Building elements icon ${chalk.yellow(filePath)} `);
+  try {
+    await esbuild.build({
+      entryPoints: [filePath],
+      bundle: true,
+      outfile: `dist/${filePath}`,
+      format: "esm",
+      sourcemap: true,
+      target: "es2017",
+      minify: true,
+      external: ["lit"],
+    });
+  } catch (err) {
+    console.error(err);
+  }
 });

package.json

@@ -12,7 +12,8 @@
   "exports": {
     "./react": "./dist/react/icons.js",
     "./vue": "./dist/vue/icons.js",
-    "./elements": "./dist/elements/icons.js",
+    "./elements": "./dist/elements/index.js",
+    "./elements/*": "./dist/elements/*.js",
     "./package.json": "./package.json"
   },
   "scripts": {

scripts/output/elements.js

@@ -17,11 +17,12 @@ getSVGs().forEach(({ svg, name, size, filename, exportName }) => {
     (attr) => attr.name + `=` + `"` + attr.value + `"`
   );
   const { message, id, comment } = titleMessage || {};
-  const titleHtml = "<title>${title}</title>";
+  const titleHtml = "${unsafeSVG(`<title>${title}</title>`)}";
   const className = exportName;
   // Handle i18n for icon title
   const output = [
     `import { LitElement, html } from 'lit';`,
+    `import { unsafeSVG } from "lit/directives/unsafe-svg.js";`,
     `import { i18n } from '@lingui/core';`,
     `import { messages as nbMessages} from '../src/raw/${name}/locales/nb/messages.mjs';`,
     `import { messages as enMessages} from '../src/raw/${name}/locales/en/messages.mjs';`,
@@ -36,7 +37,7 @@ getSVGs().forEach(({ svg, name, size, filename, exportName }) => {
       
       return html\`<svg ${attrs.join("")}>${titleHtml}${svg.html}</svg>\`; }`,
     `}`,
-    `if (!customElements.get('w-icon-${name}-${size}', ${className})) {`,
+    `if (!customElements.get('w-icon-${name}-${size}')) {`,
     `  customElements.define('w-icon-${name}-${size}', ${className});`,
     `}`,
   ].join("\n");