chore: update build scripts

build/build-defs.js

@@ -1,46 +0,0 @@
-const fs = require('fs')
-const dirnames = process.mainModule.filename.includes('pro') ?
-    ['solid', 'linear']
-  : ['free', 'brand', 'flag']
-
-const prefixes = {
-  brand:  'cib-',
-  flag:   'cif-',
-  free:   'cil-',
-  linear: 'cil-',
-  solid:  'cis-'
-} 
-
-const getAttributeValue = (string, attribute) => {
-  const regex = new RegExp(`${attribute}="([^"]+)"`, 'g')
-  return string.match(regex, '')[0]
-                .match(/"(.*?)"/ig, '')[0]
-                .replace(/"/g, '')
-}
-
-// let allNames = {}
-dirnames.forEach(setName => {
-  const dirname = `svg/${setName}/`
-  const svgs = fs.readdirSync(dirname)
-  let symbols = []
-  svgs.forEach((svg, idx, svgs) => {
-    let symbol = {}
-    const file = dirname + svg
-    const content = fs.readFileSync(file, 'utf8')
-    const viewBox = getAttributeValue(content, 'viewBox')
-    const computedContent = content.replace(/(<svg([^>]+)>)|(<\/svg>)/ig, '')
-    .replace(/\n/g, '').replace(/"/g, '\'')
-    .replace('<!-- Generated by IcoMoon.io -->', '')
-    symbol = `<symbol id="${prefixes[setName]}${svg.replace('.svg', '').toLowerCase()}" viewBox="${viewBox}">\n${computedContent}\n</symbol>`
-    idx === svgs.length - 1 ? symbols.push(symbol) : symbols.push(`${symbol}\n`)
-  })
-  fs.writeFile(
-    `symbols/${setName}-defs.svg`,
-    `<svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-<defs>
-${symbols.join('')}
-</defs>
-</svg>`,
-    () => ''
-  ) 
-})

build/build-js-files.js

@@ -1,85 +1,91 @@
 const fs = require('fs')
+const mkdirp = require('mkdirp');
 const dirnames = process.mainModule.filename.includes('pro') ?
     ['solid', 'linear']
   : ['free', 'brand', 'flag']
 
 let allNames = {}
 dirnames.forEach(setName => {
-  const dirname = `svg/${setName}/`
+  mkdirp(`js/${setName}/`, function(err) {
-  fs.readdir(dirname, (e, filenames) => {
+    if (err) {
-    if (e) {
       return
-    }
+    } 
-    let contents = {}
+    const dirname = `svg/${setName}/`
-    let names = []
+    fs.readdir(dirname, (e, filenames) => {
-    filenames.forEach(filename => {
+      if (e) {
-      fs.readFile(dirname + filename, 'utf-8', function (e, content) {
+        return
-        if (e) {
+      }
-          return
+      let contents = {}
-        } 
+      let names = []
-        
+      filenames.forEach(filename => {
-        const variableName = toCamel(filename.replace('.svg', ''))
+        fs.readFile(dirname + filename, 'utf-8', function (e, content) {
-        const jsFilename = filename.replace('.svg', '.js')
+          if (e) {
-        const tsFilename = filename.replace('.svg', '.d.ts')
+            return
-        const viewBox = getAttributeValue(content, 'viewBox').split(' ')
+          } 
-        const dimensions = `${viewBox[2]} ${viewBox[3]}`
+          
+          const variableName = toCamel(filename.replace('.svg', ''))
+          const jsFilename = filename.replace('.svg', '.js')
+          const tsFilename = filename.replace('.svg', '.d.ts')
+          const viewBox = getAttributeValue(content, 'viewBox').split(' ')
+          const dimensions = `${viewBox[2]} ${viewBox[3]}`
 
-        let iconData = []
+          let iconData = []
-        if (dimensions !== '64 64') {
+          if (dimensions !== '64 64') {
-          iconData.push(dimensions)
+            iconData.push(dimensions)
-        }
+          }
-        const computedContent = content.replace(/(<svg([^>]+)>)|(<\/svg>)/ig, '')
+          const computedContent = content.replace(/(<svg([^>]+)>)|(<\/svg>)/ig, '')
-          .replace(/\n/g, '').replace(/"/g, '\'')
+            .replace(/\n/g, '').replace(/"/g, '\'')
-          .replace('<!-- Generated by IcoMoon.io -->', '')
+            .replace('<!-- Generated by IcoMoon.io -->', '')
-        iconData.push(computedContent)
+          iconData.push(computedContent)
 
-        contents[variableName] = iconData
+          contents[variableName] = iconData
 
-        // variableName = validate(variableName)
+          // variableName = validate(variableName)
-        // jsFilename = validate(jsFilename)
+          // jsFilename = validate(jsFilename)
-        importName = validate(variableName)
+          importName = validate(variableName)
 
-        names.push({
+          names.push({
-          jsFilename,
+            jsFilename,
-          variableName,
+            variableName,
-          importName
+            importName
+          })
+
+          fs.writeFile(
+            `js/${setName}/${jsFilename}`,
+            `export const ${importName} = ` + JSON.stringify(iconData),
+            () => ''
+          )
+          fs.writeFile(
+            `js/${setName}/${tsFilename}`,
+            `export declare const ${importName}: string[];`,
+            () => ''
+          ) 
         })
-
+      })
+      setTimeout(() => {
         fs.writeFile(
-          `js/${setName}/${jsFilename}`,
+          `js/${setName}/${setName}-set.js`,
-          `export const ${importName} = ` + JSON.stringify(iconData),
+          `export const ${setName}Set = ` + JSON.stringify(contents),
           () => ''
         )
         fs.writeFile(
-          `js/${setName}/${tsFilename}`,
+          `js/${setName}/${setName}-set.d.ts`,
-          `export declare const ${importName}: string[];`,
+          typings(names, setName, false),
           () => ''
-        ) 
+        )
-      })
+        fs.writeFile(
+          `js/${setName}/index.js`,
+          getImports(names, setName),
+          () => ''
+        )
+        fs.writeFile(
+          `js/${setName}/index.d.ts`,
+          typings(names, setName),
+          () => ''
+        )
+        allNames[setName] = names
+      }, 1000)
     })
-    setTimeout(() => {
-      fs.writeFile(
-        `js/${setName}/${setName}-set.js`,
-        `export const ${setName}Set = ` + JSON.stringify(contents),
-        () => ''
-      )
-      fs.writeFile(
-        `js/${setName}/${setName}-set.d.ts`,
-        typings(names, setName, false),
-        () => ''
-      )
-      fs.writeFile(
-        `js/${setName}/index.js`,
-        getImports(names, setName),
-        () => ''
-      )
-      fs.writeFile(
-        `js/${setName}/index.d.ts`,
-        typings(names, setName),
-        () => ''
-      )
-      allNames[setName] = names
-    }, 1000)
   })
 })
 

build/build-svg-sprites.js

@@ -0,0 +1,52 @@
+const fs = require('fs')
+const mkdirp = require('mkdirp');
+const dirnames = process.mainModule.filename.includes('pro') ?
+    ['solid', 'linear']
+  : ['free', 'brand', 'flag']
+
+const prefixes = {
+  brand:  'cib-',
+  flag:   'cif-',
+  free:   'cil-',
+  linear: 'cil-',
+  solid:  'cis-'
+} 
+
+const getAttributeValue = (string, attribute) => {
+  const regex = new RegExp(`${attribute}="([^"]+)"`, 'g')
+  return string.match(regex, '')[0]
+                .match(/"(.*?)"/ig, '')[0]
+                .replace(/"/g, '')
+}
+
+mkdirp('sprites/', function(err) {
+  if (err) {
+    return
+  } 
+
+  dirnames.forEach(setName => {
+    const dirname = `svg/${setName}/`
+    const svgs = fs.readdirSync(dirname)
+    let symbols = []
+    svgs.forEach((svg, idx, svgs) => {
+      let symbol = {}
+      const file = dirname + svg
+      const content = fs.readFileSync(file, 'utf8')
+      const viewBox = getAttributeValue(content, 'viewBox')
+      const computedContent = content.replace(/(<svg([^>]+)>)|(<\/svg>)/ig, '')
+      .replace(/\n/g, '').replace(/"/g, '\'')
+      .replace('<!-- Generated by IcoMoon.io -->', '')
+      symbol = `<symbol id="${prefixes[setName]}${svg.replace('.svg', '').toLowerCase()}" viewBox="${viewBox}">\n${computedContent}\n</symbol>`
+      idx === svgs.length - 1 ? symbols.push(symbol) : symbols.push(`${symbol}\n`)
+    })
+    fs.writeFile(
+      `sprites/${setName}.svg`,
+      `<svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<defs>
+${symbols.join('')}
+</defs>
+</svg>`,
+      () => ''
+    ) 
+  })
+})

build/eps-to-svg.sh

@@ -1,8 +0,0 @@
-#!/bin/bash
-dir=${PWD}
-mkdir "$dir"/test/svg/
-for file in ${dir}/test/eps/*.eps
-    do
-        filename=$(basename "$file")
-        inkscape "$file" -o "$dir"/test/svg/"${filename%.eps}.svg"
-    done

build/generate-png.js

@@ -0,0 +1,36 @@
+const sharp = require('sharp')
+const fs = require('fs')
+const mkdirp = require('mkdirp');
+const dirnames = process.mainModule.filename.includes('pro') ?
+    ['solid', 'linear']
+  : ['free', 'brand', 'flag']
+const dest = 'png/'
+const sizes = [16, 32, 64, 128, 256]
+
+
+dirnames.forEach(setName => {
+  const dirname = `svg/${setName}/`
+  const svgs = fs.readdirSync(dirname)
+
+  sizes.forEach(size => {
+    mkdirp(`${dest}${setName}/${size}x${size}/`, function(err) {
+      if (err) {
+        return
+      } 
+  
+      svgs.forEach((svg) => {
+        const file = dirname + svg
+        sharp(file, { density: 72 * size / 16 })
+        .png()
+        .resize(size, size, {fit: 'inside'})
+        .toFile(`${dest}${setName}/${size}x${size}/${svg.replace('svg', 'png')}`)
+        .then(function(info) {
+          console.log(info)
+        })
+        .catch(function(err) {
+          console.log(err)
+        })
+      })
+    })
+  })
+})

build/svg-to-eps.sh

@@ -1,16 +0,0 @@
-#!/bin/bash
-dir=${PWD}
-# mkdir "$dir"/test/
-# mkdir "$dir"/test/pdf/
-# for file in ${dir}/raw/brands/*.svg
-#     do
-#         filename=$(basename "$file")
-#         inkscape "$file" -o "$dir"/test/pdf/"${filename%.svg}.pdf"
-#     done
-
-mkdir "$dir"/test/svg/
-for file in ${dir}/test/pdf/*.pdf
-    do
-        filename=$(basename "$file")
-        inkscape "$file" -o "$dir"/test/svg/"${filename%.pdf}.svg"
-    done

package.json

@@ -6,6 +6,7 @@
   "style": "css/all.css",
   "sideEffects": false,
   "scripts": {
+    "clean": "rimraf css js png sprites",
     "css": "npm-run-all --parallel css-compile* --sequential css-prefix css-concat css-minify*",
     "css-compile-free": "node-sass --output-style expanded --source-map true --source-map-contents true --precision 6 scss/free/free-icons.scss css/free.css",
     "css-compile-brand": "node-sass --output-style expanded --source-map true --source-map-contents true --precision 6 scss/brand/brand-icons.scss css/brand.css",
@@ -16,9 +17,12 @@
     "css-minify-free": "cleancss --level 1 --source-map --source-map-inline-sources --output css/free.min.css css/free.css",
     "css-minify-brands": "cleancss --level 1 --source-map --source-map-inline-sources --output css/brand.min.css css/brand.css",
     "css-minify-flag": "cleancss --level 1 --source-map --source-map-inline-sources --output css/flag.min.css css/flag.css",
-    "dist": "npm-run-all --parallel css",
+    "build": "npm-run-all --sequential build-*",
-    "watch-css": "nodemon --ignore dist/ -e scss -x \"npm run css\"",
     "build-js-files": "node build/build-js-files.js",
+    "build-svg-sprites": "node build/build-svg-sprites.js",
+    "build-png": "node build/generate-png.js",
+    "dist": "npm-run-all --sequential clean css build",
+    "watch-css": "nodemon --ignore dist/ -e scss -x \"npm run css\""
   },
   "repository": {
     "type": "git",
@@ -51,10 +55,14 @@
   "devDependencies": {
     "clean-css-cli": "^4.3.0",
     "concat": "^1.0.3",
+    "mkdirp": "^0.5.1",
     "node-sass": "^4.13.0",
     "nodemon": "^1.19.4",
+    "npm": "^6.13.0",
     "npm-run-all": "^4.1.5",
     "postcss-cli": "^6.1.3",
+    "rimraf": "^3.0.0",
+    "sharp": "^0.23.2",
     "shelljs": "^0.8.3",
     "stylelint": "^11.1.1",
     "stylelint-config-recommended-scss": "^4.0.0",
@@ -66,7 +74,7 @@
     "css/",
     "fonts/",
     "js/",
-    "svg/",
+    "sprites/",
-    "symbols/"
+    "svg/"
   ]
 }