✨ Make icons importable as strings

Author: Frontendland

package.json

@@ -26,6 +26,7 @@
         "./svelte": "./svelte.js",
         "./react": "./react.js",
         "./styles": "./scss/index.scss",
+        "./icons": "./icons.js",
         "./config": "./scss/config.scss"
     },
     "files": [

scripts/build.js

@@ -1,5 +1,5 @@
 import fs from 'fs'
-import { buildImports, buildUtilImports } from './buildImports.js'
+import { buildImports, buildUtilImports, buildIconImports } from './buildImports.js'
 import buildTypes from './buildTypes.js'
 
 const folders = {
@@ -41,10 +41,13 @@ fs.writeFileSync('dist/astro.js', buildImports('astro'))
 fs.writeFileSync('dist/svelte.js', buildImports('svelte'))
 fs.writeFileSync('dist/react.js', buildImports('tsx'))
 
+fs.writeFileSync('dist/index.js', buildUtilImports())
+fs.writeFileSync('dist/icons.js', buildIconImports())
+
 fs.writeFileSync('dist/astro.d.ts', buildTypes('astro'))
 fs.writeFileSync('dist/svelte.d.ts', buildTypes('svelte'))
 fs.writeFileSync('dist/react.d.ts', buildTypes('react'))
+fs.writeFileSync('dist/icons.d.ts', buildTypes('icons'))
 
-fs.writeFileSync('dist/index.js', buildUtilImports())
 
 console.log('✅ Package built')

scripts/buildImports.js

@@ -15,3 +15,10 @@ export const buildUtilImports = () => {
 
     return utils.map(util => `export * from './utils/${util}'`).join('\n')
 }
+
+export const buildIconImports = () => {
+    const icons = fs.readdirSync('src/icons')
+    const camelize = string => string.replace(/-./g, x => x[1].toUpperCase()).split('.')[0]
+
+    return icons.map(icon => `export { default as ${camelize(icon)} } from './icons/${icon}?raw'`).join('\n')
+}

scripts/buildTypes.js

@@ -79,6 +79,19 @@ const buildTypes = type => {
             }
         `)
     }
+
+    if (type === 'icons') {
+        const icons = fs.readdirSync('src/icons')
+        const camelize = string => string.replace(/-./g, x => x[1].toUpperCase()).split('.')[0]
+
+        return format(`
+            declare module 'webcoreui/${type}' {
+                ${icons.map(icon => {
+                    return `export const ${camelize(icon)}: string`
+                }).join('\n\t')}
+            }
+        `)
+    }
 }
 
 export default buildTypes