Scripts

build/icons.js

@@ -11,8 +11,6 @@ const sourceDir = path.resolve(__dirname, '../icons/') + '/'
 const buildDir = path.resolve(__dirname, '../') + '/'
 
 const iconIdsFilePath = 'iconIds.js'
-const indexFilePath = 'icons.js'
-const sourceDirFromBuildDir = './icons/'
 
 // Build logic
 function getIds () {
@@ -25,31 +23,13 @@ function getIds () {
   return sortByName(ids)
 }
 
-function clearBuildDir () {
-  removeFile(buildDir + iconIdsFilePath)
-  removeFile(buildDir + indexFilePath)
-}
-
-function composeIconIds (iconIds) {
-  return `export default [
-  ${iconIds.map(id => `'${id}'`).join(',\n  ')}
-]` + '\n'
-}
-
-function composeIndex (iconIds) {
-  return iconIds.map((id) => {
-    return `export { default as ${id} } from '${sourceDirFromBuildDir}${id}.svg'`
-  }).join('\n') + '\n'
-}
-
 // Build process
-function build () {
-  const ids = getIds()
+const ids = getIds()
 
-  clearBuildDir()
-  writeTextFile(buildDir + iconIdsFilePath, composeIconIds(ids))
-  writeTextFile(buildDir + indexFilePath, composeIndex(ids))
-}
+removeFile(buildDir + iconIdsFilePath)
+
+const fileContent = `export default [
+${ids.map(id => `'${id}'`).join(',\n  ')}
+]` + '\n'
 
-// Actually run the build
-build()
+writeTextFile(buildDir + iconIdsFilePath, fileContent)

build/indexFiles.js

@@ -0,0 +1,49 @@
+const path = require('node:path')
+
+// const log = require('./log')
+const getFileList = require('./utils/getFileList')
+const removeFile = require('./utils/removeFile')
+const sortByName = require('./utils/sortByName')
+const writeTextFile = require('./utils/writeTextFile')
+
+const dirs = [
+  'composables',
+  'icons',
+  'utils'
+]
+
+// Build logic
+function getFilenames (sourceDir) {
+  const fileList = getFileList(sourceDir, '{svg,js}')
+
+  const ids = fileList.map((file) => {
+    return file.replace(sourceDir, '')
+  })
+
+  return sortByName(ids)
+}
+
+function composeIndex (sourceDirFromBuildDir, filenames) {
+  return filenames.map((filename) => {
+    return `export { default as ${filename.replace('.js', '').replace('.svg', '')} } from '${sourceDirFromBuildDir}${filename}'`
+  }).join('\n') + '\n'
+}
+
+// Build process
+function build () {
+  dirs.forEach((dir) => {
+    const sourceDir = path.resolve(__dirname, `../${dir}/`) + '/'
+    const buildDir = path.resolve(__dirname, '../') + '/'
+
+    const indexFilePath = `${dir}.js`
+    const sourceDirFromBuildDir = `./${dir}/`
+
+    const filenames = getFilenames(sourceDir)
+
+    removeFile(buildDir + indexFilePath)
+    writeTextFile(buildDir + indexFilePath, composeIndex(sourceDirFromBuildDir, filenames))
+  })
+}
+
+// Actually run the build
+build()

build/optimizeIcons.js

@@ -0,0 +1,23 @@
+// https://github.com/svg/svgo?tab=readme-ov-file#api-usage
+const {
+  // loadConfig,
+  optimize
+} = require('svgo')
+
+const path = require('node:path')
+
+const getFileList = require('./utils/getFileList')
+const readFile = require('./utils/readFile')
+const writeTextFile = require('./utils/writeTextFile')
+
+// const config = await loadConfig()
+
+const sourceDir = path.resolve(__dirname, '../icons/') + '/'
+const filePaths = getFileList(sourceDir, 'svg')
+
+filePaths.forEach((filePath) => {
+  const svgString = readFile(filePath)
+  const optimized = optimize(svgString)
+
+  writeTextFile(filePath, optimized.data)
+})

build/utils/readFile.js

@@ -0,0 +1,13 @@
+const fs = require('node:fs')
+
+// https://nodejs.org/en/learn/manipulating-files/reading-files-with-nodejs
+module.exports = function (path) {
+  try {
+    const data = fs.readFileSync(path, 'utf8')
+    return data
+  } catch (err) {
+    console.error(err)
+  }
+
+  return ''
+}

package.json

@@ -30,10 +30,9 @@
   "license": "MIT",
   "scripts": {
     "clean": "rm -rf css dist",
-    "build": "npm run build:composables && npm run build:icons  && npm run build:utils && npm run build:scss",
-    "build:composables": "node ./build/composables.js",
-    "build:icons": "node ./build/icons.js",
-    "build:utils": "node ./build/utils.js",
+    "build": "npm run build:indexFiles && npm run build:icons && npm run build:scss",
+    "build:indexFiles": "node ./build/indexFiles.js",
+    "build:icons": "node ./build/optimizeIcons.js && node ./build/icons.js",
     "build:scss": "sass scss/index.scss css/index.css && sass scss/index.scss css/index.min.css --style=compressed",
     "lint": "eslint --ignore-path .gitignore \"**/*.{js,cjs,mjs,ts,vue}\"",
     "lint:fix": "npm run lint -- --fix",
@@ -114,6 +113,7 @@
     "eslint-plugin-n": "^16.5.0",
     "glob": "^11.0.0",
     "happy-dom": "^12.10.3",
+    "svgo": "^3.3.2",
     "vite": "^5.0.10",
     "vitest": "^1.0.4"
   },

svgo.config.mjs

@@ -0,0 +1,40 @@
+// https://github.com/svg/svgo
+export default {
+  multipass: false, // boolean
+  datauri: 'base64', // 'base64'|'enc'|'unenc'
+  js2svg: {
+    indent: 4, // number
+    pretty: false // boolean
+  },
+  plugins: [
+    'preset-default', // built-in plugins enabled by default
+    'removeTitle',
+    // 'removeViewBox',
+    'removeDimensions',
+
+    // {
+    //   name: 'convertTransform',
+    //   params: {
+    //     degPrecision: 0,
+    //     floatPrecision: 0,
+    //     transformPrecision: 0
+    //   }
+    // },
+
+    // https://svgo.dev/docs/plugins/convertColors/
+    {
+      name: 'convertColors',
+      params: {
+        names2hex: true,
+        rgb2hex: true,
+        shorthex: true,
+        shortname: true,
+
+        // Convert this color code in fills/strokes to currentColor (used to generate mono-capable assets)
+        // NOTE: must be exact, case-sensitive match before any other conversions
+        // Assets must be authored with this in mind
+        currentColor: '#FF00FF'
+      }
+    }
+  ]
+}