build: update scripts

build/build-examples.js

@@ -20,10 +20,8 @@ const unique = (array, key) => array.map(e => e[key]).map((e, i, final) => final
 
 const main = () => {
   rimraf.sync(examplesDir)
-  mkdirp(examplesDir, (err) => {
+  mkdirp(examplesDir).then(() => {
-    if (err) {
+
-      return
-    }
     const files = walkSync(dataDir).filter(element => path.extname(element) === '.json')
     files.forEach(file => {
       const rawdata = fs.readFileSync(file)
@@ -49,12 +47,6 @@ const main = () => {
         const name = icon.name
         html += `    <div class="col-1 py-4 text-center"><svg class="c-icon c-icon-2xl"><use xlink:href="../sprites/${type.toLowerCase()}.svg#${prefix}${name.toLowerCase()}"></use></svg></div>\n`
       })
-      html += `  </div>\n<hr>\n`
-      html += `  <div class="row">\n`
-      unique(icons, 'name').forEach(icon => {
-        const name = icon.name
-        html += `    <div class="col-1 py-4 text-center"><object class="c-icon c-icon-2xl" type="image/svg+xml" data="../svg/${type.toLowerCase()}/${prefix}${name.toLowerCase()}.svg">Your browser does not support SVGs</object></div>\n`
-      })
       html += `  </div>\n`
       html += `</body>\n</html>`
       
@@ -63,4 +55,4 @@ const main = () => {
   })
 }
 
-main()
+main()

build/build-fonts.js

@@ -19,8 +19,7 @@ webfont({
   verbose: true,
 }).then(result => {
 
-  mkdirp(fontDir, (err) => {
+  mkdirp(fontDir).then(() => {
-    if (err) throw err
 
     fs.writeFile(`${path.join(fontDir, argv.name)}.eot`, result.eot, (err) => {
       if (err) throw err
@@ -66,15 +65,12 @@ webfont({
     if (err) throw err
     obj = JSON.parse(data)
 
-    const mergeByName = (a1, a2) =>
+    const mergeByName = (a1, a2) => a1.map(itm => ({
-    a1.map(itm => ({
+      ...a2.find((item) => (item.name === itm.name) && item),
-        ...a2.find((item) => (item.name === itm.name) && item),
+      ...itm
-        ...itm
     }))
 
-    json = JSON.stringify({
+    json = JSON.stringify(mergeByName(obj, iconsList), null, 2)
-      "icons": mergeByName(obj.icons, iconsList)
-    }, null, 2)
 
     fs.writeFileSync(`${dataDir}/${argv.name.replace('CoreUI-Icons-', '')}.json`, json)
   })

build/build-icons-lists.js

@@ -1,76 +0,0 @@
-const fs = require('fs')
-const mkdirp = require('mkdirp')
-const path = require('path')
-const walkSync = require('./walk-sync.js')
-
-const dataDir = path.join(__dirname, '../data')
-const rawDir = path.join(__dirname, '../raw')
-
-const prefixes = {
-  brand:   'cib-',
-  duotone: 'cid-',
-  flag:    'cif-',
-  free:    'cil-',
-  linear:  'cil-',
-  solid:   'cis-'
-} 
-
-const main = () => {
-  const types = fs.readdirSync(rawDir).filter(element => fs.statSync(path.join(rawDir, element)).isDirectory())
-  const allIconsList = {
-    icons: []
-  }
-
-  types.forEach(type => {
-    const icons = walkSync(path.join(rawDir, type)).filter(element => path.extname(element) === '.svg').map(element => path.relative(path.join(rawDir, type), element).replace('SVG/', ''))
-    const iconsList = {
-      icons: []
-    }
-    icons.forEach(icon => {
-      const category = icon.split('/').length > 1 ? icon.split('/')[0] : type
-      const filename = icon.split('/').length > 1 ? icon.split('/')[1] : icon.split('/')[0]
-      const prefix = prefixes[type.toLowerCase()]
-
-      if (filename.indexOf(',') !== -1) {
-        throw `${type} - ${category} - ${filename}`
-      }
-
-      if (filename.indexOf('#') !== -1) {
-        filename.split('#').forEach(element => {
-          let iconDetails = {
-            name: element.replace('.svg', ''),
-            category,
-            type,
-            prefix
-          }
-          iconsList.icons.push(iconDetails)
-          allIconsList.icons.push(iconDetails)
-        })
-      } else {
-        let iconDetails = {
-          name: filename.replace('.svg', ''),
-          category,
-          type,
-          prefix
-        }
-        iconsList.icons.push(iconDetails)
-        allIconsList.icons.push(iconDetails)
-      }
-    })
-
-    let data = JSON.stringify(iconsList, null, 2)
-
-    mkdirp(dataDir, (err) => {
-      if (err) {
-        return
-      }
-
-      fs.writeFileSync(path.join(dataDir, `${type}.json`), data)
-    })
-  })
-  
-  let data = JSON.stringify(allIconsList, null, 2)
-  fs.writeFileSync(path.join(dataDir, 'All.json'), data)
-}
-
-main()

build/build-js-files.js

@@ -9,117 +9,71 @@ const dirnames = process.mainModule.filename.includes('pro') ?
 
 let allNames = {}
 dirnames.forEach(setName => {
-  mkdirp(`js/${setName}/`, function(err) {
+  mkdirp(`js/${setName}/`).then(() => {
-    if (err) {
-      return
-    } 
     const dirname = `svg/${setName}/`
-    fs.readdir(dirname, (e, filenames) => {
+    let contents = {}
-      if (e) {
+    let names = []
-        return
+    fs.readdirSync(dirname).forEach(filename => {
-      }
+      console.log(filename)
-      let contents = {}
+      if (extname(filename) === '.svg') {
-      let names = []
+        const content = fs.readFileSync(dirname + filename, {encoding:'utf8'})
-      filenames.forEach(filename => {
+        const variableName = toCamel(filename.replace('.svg', ''))
-        console.log(filename)
+        const jsFilename = filename.replace('.svg', '.js')
-        if (extname(filename) === '.svg') {
+        const tsFilename = filename.replace('.svg', '.d.ts')
-          fs.readFile(dirname + filename, 'utf-8', function (e, content) {
+        const viewBox = getAttributeValue(content, 'viewBox').split(' ')
-            if (e) {
+        const dimensions = `${viewBox[2]} ${viewBox[3]}`
-              return
-            } 
-            
-            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, '')
-                .replace(/\n\s\s+/g, '')
-                .replace(/\n/g, '')
-                .replace(/"/g, '\'')
-                .replace('<!-- Generated by IcoMoon.io -->', '')
-            iconData.push(computedContent)
-
-            contents[variableName] = iconData
-
-            // variableName = validate(variableName)
-            // jsFilename = validate(jsFilename)
-            importName = validate(variableName)
-
-            names.push({
-              jsFilename,
-              variableName,
-              importName
-            })
-
-            fs.writeFile(
-              `js/${setName}/${jsFilename}`,
-              `export const ${importName} = ` + JSON.stringify(iconData),
-              () => ''
-            )
-            fs.writeFile(
-              `js/${setName}/${tsFilename}`,
-              `export declare const ${importName}: any[];`,
-              () => ''
-            ) 
-          })
         }
-      })
+        const computedContent = 
-      setTimeout(() => {
+          content
-        fs.writeFile(
+            .replace(/(<svg([^>]+)>)|(<\/svg>)/ig, '')
-          `js/${setName}/${setName}-set.js`,
+            .replace(/\n\s\s+/g, '')
-          `export const ${setName}Set = ` + JSON.stringify(contents),
+            .replace(/\n/g, '')
-          () => ''
+            .replace(/"/g, '\'')
+        iconData.push(computedContent)
+
+        contents[variableName] = iconData
+
+        importName = validate(variableName)
+
+        names.push({
+          jsFilename,
+          variableName,
+          importName
+        })
+
+        // Create single icon
+        fs.writeFileSync(
+          `js/${setName}/${jsFilename}`,
+          `export const ${importName} = ` + JSON.stringify(iconData)
         )
-        fs.writeFile(
+
-          `js/${setName}/${setName}-set.d.ts`,
+        // Create typings for single icon
-          typings(names, setName, false),
+        fs.writeFileSync(
-          () => ''
+          `js/${setName}/${tsFilename}`,
+          `export declare const ${importName}: any[];`
         )
-        fs.writeFile(
+      }
-          `js/${setName}/index.js`,
-          getImports(names, setName),
-          () => ''
-        )
-        fs.writeFile(
-          `js/${setName}/index.d.ts`,
-          typings(names, setName),
-          () => ''
-        )
-        allNames[setName] = names
-      }, 1000)
     })
+
+    fs.writeFileSync(`js/${setName}/${setName}-set.js`, `export const ${setName}Set = ` + JSON.stringify(contents))
+    fs.writeFileSync(`js/${setName}/${setName}-set.d.ts`, typings(names, setName, false))
+    fs.writeFileSync(`js/${setName}/index.js`, getImports(names, setName))
+    fs.writeFileSync(`js/${setName}/index.d.ts`, typings(names, setName))
+
+    allNames[setName] = names
   })
 })
 
-setTimeout(() => {
+let imports = ''
-  let imports = ''
+Object.keys(allNames).forEach(set => {
-  Object.keys(allNames).forEach(set => {
+  imports += getImports(allNames[set], set, true)
-    imports += getImports(allNames[set], set, true)
+  imports += '\n\n\n'
-    imports += '\n\n\n'
+})
-  })
+fs.writeFileSync(`index.js`, imports)
-  fs.writeFile(
-    `index.js`,
-    imports,
-    () => ''
-  )
-}, 3000)
-  
-
-// const toPascalCase = function (name) {
-//   return name.match(/[A-Za-z0-9]+/gi)
-//     .map(function (word) {
-//       return word.charAt(0).toUpperCase() + word.substr(1).toLowerCase()
-//     })
-//     .join('')
-// }
 
 const getAttributeValue = (string, attribute) => {
   const regex = new RegExp(`${attribute}="([^"]+)"`, 'g')
@@ -128,21 +82,13 @@ const getAttributeValue = (string, attribute) => {
                .replace(/"/g, '')
 }
 
-// function getVariableName (filename, directory) {
+const toCamel = (str) => {
-//   if (directory.includes('flags')) {
-//     return filename.replace('.svg', '').replace(/-/g, '').toUpperCase()
-//   } else {
-//     return toCamel(filename.replace('.svg', ''))
-//   }
-// }
-
-function toCamel (str) {
   return str.replace(/([-_][a-z0-9])/ig, ($1) => {
     return $1.toUpperCase().replace('-', '')
   })
 }
 
-function validate(str) {
+const validate = (str) => {
   if (!isNaN(str.charAt(0))) {
     return 'n' + str
   } else {
@@ -150,7 +96,7 @@ function validate(str) {
   }
 }
 
-function getImports(names, setName, deep = false) {
+const getImports = (names, setName, deep = false) => {
   const folder = deep ? `/js/${setName}/` : '/'
   const defaultImport = `import { ${setName}Set } from '.${folder}${setName}-set.js' \n`
   const defaultExport = `export { ${setName}Set } \n\n`
@@ -163,8 +109,7 @@ function getImports(names, setName, deep = false) {
   return defaultImport + defaultExport + importString + '\n' + exportString
 }
 
-function typings(names, setName, all = true) {
+const typings = (names, setName, all = true) => {
-
   const icons = names.map(name => {
     return `  "${name.importName}": any[];`
   }).join('\n')

build/build-png.js

@@ -18,11 +18,7 @@ dirnames.forEach(setName => {
   const svgs = fs.readdirSync(dirname)
 
   sizes.forEach(size => {
-    mkdirp(`${dest}${setName}/${size}x${size}/`, function(err) {
+    mkdirp(`${dest}${setName}/${size}x${size}/`).then(() => {
-      if (err) {
-        return
-      } 
-  
       svgs.forEach((svg) => {
         const file = dirname + svg
         sharp(file, { density: 72 * size / 16 })

build/build-svg-sprites.js

@@ -21,11 +21,7 @@ const getAttributeValue = (string, attribute) => {
                 .replace(/"/g, '')
 }
 
-mkdirp('sprites/', function(err) {
+mkdirp('sprites/').then(() => {  
-  if (err) {
-    return
-  } 
-
   dirnames.forEach(setName => {
     const dirname = `svg/${setName}/`
     const svgs = fs.readdirSync(dirname).filter(element => path.extname(element) === '.svg')
@@ -40,14 +36,17 @@ mkdirp('sprites/', function(err) {
           .replace(/(<svg([^>]+)>)|(<\/svg>)/ig, '')
           .replace(/\n\s\s+/g, '')
           .replace(/\n/g, '')
+          .replace(/"/g, '\'')
           .replace('<!-- Generated by IcoMoon.io -->', '')
-      symbol = `  <symbol id="${svg.replace('.svg', '').toLowerCase()}" viewBox="${viewBox}">\n    ${computedContent}\n  </symbol>`
+      symbol = `<symbol id="${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/build-variables.js

@@ -15,7 +15,7 @@ const unique = (array, key) => array.map(e => e[key]).map((e, i, final) => final
 
 const main = () => {
   const rawdata = fs.readFileSync(json)
-  const icons = JSON.parse(rawdata).icons.sort((a,b) => (a.name > b.name) ? 1 : ((b.name > a.name) ? -1 : 0))
+  const icons = JSON.parse(rawdata).sort((a,b) => (a.name > b.name) ? 1 : ((b.name > a.name) ? -1 : 0))
   let content = `$coreui-icons-prefix: "${argv.prefix}-" !default;\n`
 
   if (argv.font) {

build/svgo.yml

@@ -1,55 +0,0 @@
-# https://github.com/svg/svgo/blob/master/docs/how-it-works/en.md
-# replace default config
-
-multipass: true
-#full: true
-
-# https://github.com/svg/svgo/blob/master/lib/svgo/js2svg.js#L6 for more config options
-
-js2svg:
-  pretty: true
-  indent: 2
-
-plugins:
-  - cleanupAttrs: true
-  - cleanupEnableBackground: true
-  - cleanupIDs: true
-  - cleanupListOfValues: true
-  - cleanupNumericValues: true
-  - collapseGroups: true
-  - convertColors: true
-  - convertPathData: false
-  - convertShapeToPath: false
-  - convertStyleToAttrs: true
-  - convertTransform: true
-  - inlineStyles:
-      onlyMatchedOnce: false
-      removeMatchedSelectors: false
-  - mergePaths: false
-  - minifyStyles: true
-  - moveElemsAttrsToGroup: true
-  - moveGroupAttrsToElems: true
-  - removeAttrs:
-      attrs:
-        - "data-name"
-  - removeComments: true
-  - removeDesc: true
-  - removeDoctype: true
-  - removeEditorsNSData: true
-  - removeEmptyAttrs: true
-  - removeEmptyContainers: true
-  - removeEmptyText: true
-  - removeHiddenElems: true
-  - removeMetadata: true
-  - removeNonInheritableGroupAttrs: true
-  - removeStyleElement: true
-  - removeTitle: true
-  - removeUnknownsAndDefaults:
-      keepRoleAttr: true
-  - removeUnusedNS: true
-  - removeUselessDefs: true
-  - removeUselessStrokeAndFill: true
-  - removeViewBox: false
-  - removeXMLNS: false
-  - removeXMLProcInst: true
-  - sortAttrs: true

package.json

@@ -1,18 +1,12 @@
 {
   "name": "@coreui/icons",
-  "version": "2.0.0-beta.0",
+  "version": "2.0.0-beta.1",
   "description": "CoreUI Icons Free",
   "main": "js/index.js",
   "style": "css/all.css",
   "sideEffects": false,
   "scripts": {
-    "clean": "rimraf css js/{brand,flag,free} png svg sprites",
+    "clean": "rimraf css js/{brand,flag,free} png sprites",
-    "copy": "npm-run-all --parallel copy-*",
-    "copy-brand": "node build/copy-svg-files.js --src brand --prefix cib",
-    "copy-flag": "node build/copy-svg-files.js --src flag --prefix cif",
-    "copy-free": "node build/copy-svg-files.js --src free --prefix cil",
-    "optimize": "svgo -r svg/ --config=build/svgo.yml",
-    "icons-list": "node build/build-icons-lists.js",
     "fonts": "npm-run-all --parallel font-*",
     "font-brand": "node build/build-fonts.js --src brand --name CoreUI-Icons-Brand --prefix cib",
     "font-free": "node build/build-fonts.js --src free --name CoreUI-Icons-Free --prefix cil",
@@ -34,7 +28,7 @@
     "svg-sprites": "node build/build-svg-sprites.js",
     "png": "node build/build-png.js --sizes={16,32}",
     "examples": "node build/build-examples.js",
-    "build": "npm-run-all --sequential copy icons-list optimize fonts scss-variables --parallel css js svg-sprites examples png",
+    "build": "npm-run-all --sequential fonts scss-variables css js svg-sprites examples png",
     "dist": "npm-run-all --sequential clean build",
     "localhost": "http-server -o ./examples/"
   },
@@ -73,28 +67,26 @@
   "devDependencies": {
     "clean-css-cli": "^4.3.0",
     "concat": "^1.0.3",
-    "http-server": "^0.12.1",
+    "http-server": "^0.12.3",
-    "minimist": "^1.2.0",
+    "minimist": "^1.2.5",
-    "mkdirp": "^0.5.1",
+    "mkdirp": "^1.0.4",
-    "node-sass": "^4.13.0",
+    "node-sass": "^4.14.0",
     "npm-run-all": "^4.1.5",
-    "postcss-cli": "^6.1.3",
+    "postcss-cli": "^7.1.1",
-    "rimraf": "^3.0.0",
+    "rimraf": "^3.0.2",
-    "sharp": "^0.23.2",
+    "sharp": "^0.25.2",
-    "shelljs": "^0.8.3",
+    "shelljs": "^0.8.4",
-    "stylelint": "^11.1.1",
+    "stylelint": "^13.3.3",
-    "stylelint-config-recommended-scss": "^4.0.0",
+    "stylelint-config-recommended-scss": "^4.2.0",
-    "stylelint-config-standard": "^19.0.0",
+    "stylelint-config-standard": "^20.0.0",
-    "stylelint-order": "^3.1.1",
+    "stylelint-order": "^4.0.0",
-    "stylelint-scss": "^3.12.1",
+    "stylelint-scss": "^3.17.1",
-    "svgo": "^1.3.2",
     "webfont": "^9.0.0"
   },
   "files": [
     "css/",
     "fonts/",
     "js/",
-    "png/",
     "scss/",
     "sprites/",
     "svg/"