feat(foundations/icons): add mozaic svelte icon components (#824)

iconCompiler/componentsGenerators/index.js

@@ -1,34 +1,57 @@
-const fs = require('fs')
-const path = require('path')
-const reactIconsIndex = require('./reactIcon')
-const vueIconsIndex = require('./vueIcon')
-const config = require('../config')
+const fs = require("fs")
+const path = require("path")
+const reactIconsIndex = require("./reactIcon")
+const svelteIconsIndex = require("./svelteIcon")
+const vueIconsIndex = require("./vueIcon")
+const config = require("../config")
+const { createComponentName } = require("../utils/tools")
 
 const transpilers = {
   react: {
     transpiler: reactIconsIndex,
-    file: 'index.js',
+    file: "index.js",
   },
   vue: {
     transpiler: vueIconsIndex,
-    file: 'index.vue',
+    file: "index.vue",
+  },
+  svelte: {
+    transpiler: svelteIconsIndex,
+    file: "index.svelte",
   },
 }
 
 const generateIconComponent = (framework, icons) =>
   new Promise((res, rej) => {
-    const data = transpilers[framework].transpiler(icons)
+    if (framework === "svelte") {
+      icons.map((icon) => {
+        const dataSvelte = transpilers[framework].transpiler(icon)
+        const parsedName = createComponentName(icon.fileName)
+
+        const writePath = path.join(
+          process.cwd(),
+          config.outputPaths[framework],
+          `${parsedName}.svelte`
+        )
 
-    const writePath = path.join(
-      process.cwd(),
-      config.outputPaths[framework],
-      transpilers[framework].file
-    )
+        fs.writeFile(writePath, dataSvelte, "utf8", (err) => {
+          if (err) rej(err)
+          res(true)
+        })
+      })
+    } else {
+      const data = transpilers[framework].transpiler(icons)
+      const writePath = path.join(
+        process.cwd(),
+        config.outputPaths[framework],
+        transpilers[framework].file
+      )
 
-    fs.writeFile(writePath, data, 'utf8', err => {
-      if (err) rej(err)
-      res(true)
-    })
+      fs.writeFile(writePath, data, "utf8", (err) => {
+        if (err) rej(err)
+        res(true)
+      })
+    }
   })
 
 module.exports = generateIconComponent

iconCompiler/componentsGenerators/svelteIcon.js

@@ -0,0 +1,24 @@
+const { convertPxToRem } = require("../utils/tools")
+
+const iconContent = (fileName, data) => {
+  const size = fileName.replace(".svg", "").split("_").pop()
+
+  const parsedData = data.replace(
+    "<svg",
+    `<svg width={size} height={size} id={id}  style={style} class={className} fill={fill}`
+  )
+
+  return `<script>
+  export let id = undefined;
+  export let style = undefined;
+  export let className = undefined;
+  export let fill = undefined;
+  export let size = "${convertPxToRem(size)}";
+</script>
+
+${parsedData}`
+}
+
+const svelteIconsIndex = (icon) => `${iconContent(icon.fileName, icon.data)}`
+
+module.exports = svelteIconsIndex

iconCompiler/config.js

@@ -1,22 +1,23 @@
-const path = require('path')
-const destPath = strPath => path.relative(process.cwd(), strPath)
+const path = require("path")
+const destPath = (strPath) => path.relative(process.cwd(), strPath)
 
 module.exports = {
   sourcePaths: {
-    svg: destPath('src/icons/SVG'),
-    svgColor: destPath('src/icons/COLORS/SVG'),
-    svgColorToGatsby: destPath('src/icons/COLORS/SVG'),
-    pdf: destPath('src/icons/PDF'),
-    pdfColor: destPath('src/icons/COLORS/PDF'),
+    svg: destPath("src/icons/SVG"),
+    svgColor: destPath("src/icons/COLORS/SVG"),
+    svgColorToGatsby: destPath("src/icons/COLORS/SVG"),
+    pdf: destPath("src/icons/PDF"),
+    pdfColor: destPath("src/icons/COLORS/PDF"),
   },
   outputPaths: {
-    data: destPath('src/data'),
-    svg: destPath('packages/icons/svg'),
-    svgColor: destPath('packages/icons/svg-color'),
-    svgColorToGatsby: destPath('static/colorsvg'),
-    pdf: destPath('packages/icons/pdf'),
-    pdfColor: destPath('packages/icons/pdf-color'),
-    react: destPath('packages/icons/react'),
-    vue: destPath('packages/icons/vue'),
+    data: destPath("src/data"),
+    svg: destPath("packages/icons/svg"),
+    svgColor: destPath("packages/icons/svg-color"),
+    svgColorToGatsby: destPath("static/colorsvg"),
+    pdf: destPath("packages/icons/pdf"),
+    pdfColor: destPath("packages/icons/pdf-color"),
+    react: destPath("packages/icons/react"),
+    vue: destPath("packages/icons/vue"),
+    svelte: destPath("packages/icons/svelte"),
   },
 }

iconCompiler/index.js

@@ -1,14 +1,14 @@
-const config = require('./config')
-const cleanDirectories = require('./utils/cleanDirectories')
-const cleanIcons = require('./svgCleaners')
+const config = require("./config")
+const cleanDirectories = require("./utils/cleanDirectories")
+const cleanIcons = require("./svgCleaners")
 const {
   monochromOptim,
   colorOptim,
-} = require('./svgCleaners/optimizationConfigs')
+} = require("./svgCleaners/optimizationConfigs")
 
-const generateIconComponent = require('./componentsGenerators')
-const generateIconsDatas = require('./generateData')
-const copyPDF = require('./copyPDF')
+const generateIconComponent = require("./componentsGenerators")
+const generateIconsDatas = require("./generateData")
+const copyPDF = require("./copyPDF")
 
 const outputIconSetSize = (monochromSet, colorSet) => `
 ---------------------------------------
@@ -27,33 +27,34 @@ console.log(`
 
 cleanDirectories(config)
   .then(() => {
-    console.log('✓ SUCCESS : Icons Directories cleaned and recreated')
+    console.log("✓ SUCCESS : Icons Directories cleaned and recreated")
 
     return Promise.all([
-      cleanIcons('svg', monochromOptim),
-      cleanIcons('svgColor', colorOptim),
-      cleanIcons('svgColorToGatsby', colorOptim),
+      cleanIcons("svg", monochromOptim),
+      cleanIcons("svgColor", colorOptim),
+      cleanIcons("svgColorToGatsby", colorOptim),
     ])
   })
-  .then(icons => {
+  .then((icons) => {
     console.log(outputIconSetSize(icons[0], icons[1]))
-    console.log('✓ SUCCESS : Icons cleaned and saved as SVGs in the package')
+    console.log("✓ SUCCESS : Icons cleaned and saved as SVGs in the package")
 
     return Promise.all([
-      generateIconComponent('react', icons[0]),
-      generateIconComponent('vue', icons[0]),
+      generateIconComponent("react", icons[0]),
+      generateIconComponent("vue", icons[0]),
+      generateIconComponent("svelte", icons[0]),
       generateIconsDatas(icons),
     ]).then(() => Promise.resolve())
   })
   .then(() => {
     console.log(
-      '✓ SUCCESS : Monochrom icons compiled into react and vue components' +
-        '\n✓ SUCCESS : JSON created to use in gatsby for previewing all icons'
+      "✓ SUCCESS : Monochrom icons compiled into react and vue components" +
+        "\n✓ SUCCESS : JSON created to use in gatsby for previewing all icons"
     )
 
-    return Promise.all([copyPDF('pdf'), copyPDF('pdfColor')])
+    return Promise.all([copyPDF("pdf"), copyPDF("pdfColor")])
   })
   .then(() => {
-    console.log('✓ SUCCESS : PDF icons copied into packages')
+    console.log("✓ SUCCESS : PDF icons copied into packages")
   })
-  .catch(err => console.error(`✗ ERROR : ${err}`))
+  .catch((err) => console.error(`✗ ERROR : ${err}`))