Add icon web component (#3)

* Add static icon collection file

* Add icon web component

Author: alexanderweigelt

example/app/src/main.ts

@@ -1,6 +1,7 @@
 import './style.css'
-import '@alexanderweigelt/icon-library/dist/styles/main.css'
-import IconSprite from '@alexanderweigelt/icon-library/dist/icons/icons.sprite.svg'
+import '@alexanderweigelt/icon-library/lib/styles/main.css'
+import '@alexanderweigelt/icon-library/lib/IconComponent'
+import IconSprite from '@alexanderweigelt/icon-library/lib/icons/icons.sprite.svg'
 
 document.querySelector<HTMLDivElement>('#app')!.innerHTML = `
 <header>
@@ -22,6 +23,13 @@ document.querySelector<HTMLDivElement>('#app')!.innerHTML = `
             <use xlink:href="#user"></use>
         </svg>
     </div>
+    <div class="card">
+        <p>Get your icons from web component. &lt;icon-component name="home"&gt;&lt;/icon-component&gt;</p>
+        <icon-component name="home"></icon-component>
+        <icon-component name="user"></icon-component>
+        <!-- Check the fallback icon for an unassigned symbol name -->
+        <icon-component name="fallback"></icon-component>
+    </div>
 </article>
 `
 document.querySelector<HTMLDivElement>('#sprite')!.innerHTML = IconSprite

packages/icon-library/build/compile.js

@@ -14,17 +14,21 @@ class IconLibraryCompiler {
     constructor() {
         this.rootDir = join(__dirname, '..');
         this.paths = {
+            collection: {
+                file: 'collection.generated.json',
+                destination: 'lib',
+            },
             svg: {
                 source: 'src/icons',
-                destination: 'dist/icons',
+                destination: 'lib/icons',
             },
             sass: {
                 source: 'src/styles/main.scss',
-                destination: 'dist/styles/main.css',
+                destination: 'lib/styles/main.css',
             },
             sprite: {
                 file: 'icons.sprite.svg',
-                destination: 'dist/icons',
+                destination: 'lib/icons',
             }
         };
     }
@@ -38,9 +42,9 @@ class IconLibraryCompiler {
         let items = [];
 
         try {
-            await readdir(directory, (err, files) => {
+            items = await readdir(directory, (err, files) => {
+                console.log('Files:',files)
                 if (err) throw Error(err.message);
-                items = files;
             });
         } catch {
             return await mkdir(directory, {
@@ -51,6 +55,19 @@ class IconLibraryCompiler {
         return Promise.all(items.map((item) => rm(join(directory, item), {recursive: true})));
     }
 
+    /**
+     * Writes the collected icons to a json file
+     * @param svgData
+     * @returns {Promise<void>}
+     */
+    async createIconCollection(svgData) {
+        let map = {};
+        const dist = join(this.rootDir, this.paths.collection.destination, this.paths.collection.file);
+        svgData.map((data) => (map[data.key] = data.optimizedSvg));
+
+        return await writeFile(dist, JSON.stringify(map));
+    }
+
     /**
      * Returns the SVG data from source directory
      * @returns {Promise<Awaited<{optimizedSvg: string, iconName: *, title: string, iconFileName: *, key: *}>[]>}
@@ -176,6 +193,7 @@ class IconLibraryCompiler {
             await this.emptyDirectory(join(this.rootDir, this.paths.svg.destination));
             await this.emptyDirectory(join(this.rootDir, this.paths.sass.destination.substring(0, this.paths.sass.destination.lastIndexOf('/'))));
             const svgData = await this.getSvgsData();
+            await this.createIconCollection(svgData);
             await this.createSvgIconFiles(svgData);
             await this.createSassStyles(svgData);
             await this.createSvgSprite(svgData);
@@ -187,4 +205,4 @@ class IconLibraryCompiler {
 }
 
 const iconCompiler = new IconLibraryCompiler();
-iconCompiler.compileIcons().then(() => console.log("Successful compiled!"));
+iconCompiler.compileIcons().then(() => console.log("Successful compiled Icon library static assets!"));

packages/icon-library/config/svgo.config.js

@@ -7,7 +7,7 @@ module.exports = {
         {
             name: 'removeAttrs',
             params: {
-                attrs: ['path:(fill|stroke)', 'fill'],
+                attrs: ['path:(fill|stroke)', 'fill', 'data.*'],
             },
         },
         {

packages/icon-library/dist/IconComponent.d.ts

@@ -0,0 +1 @@
+export {};