release: 2.1.7

Merge pull request #73 from Iconscout/release-2.1.7

.github/workflows/npm-publish-rc.yml

@@ -43,3 +43,8 @@ jobs:
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           NPM_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }}
+      - name: Upload Artifact
+        uses: actions/upload-artifact@master
+        with:
+          name: fonts
+          path: dist/fonts

.github/workflows/npm-publish.yml

@@ -43,3 +43,31 @@ jobs:
         run: echo "//registry.npmjs.org/:_authToken=${NPM_TOKEN}" > ~/.npmrc && npm publish
         env:
           NPM_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }}
+      - name: Upload Artifact
+        uses: actions/upload-artifact@master
+        with:
+          name: fonts
+          path: dist/fonts
+      - name: Build Release Zip
+        run: |
+          zip -r fonts.zip dist/fonts
+      - name: Create Release
+        id: create_release
+        uses: actions/create-release@v1
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          tag_name: ${{ steps.extract_version.outputs.VERSION }}
+          release_name: Release ${{ steps.extract_version.outputs.VERSION }}
+          draft: true
+          prerelease: true
+      - name: Upload Release Asset
+        id: upload_release_asset 
+        uses: actions/upload-release-asset@v1
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          upload_url: ${{ steps.create_release.outputs.upload_url }} # This pulls from the CREATE RELEASE step above, referencing it's ID to get its outputs object, which include a `upload_url`. See this blog post for more info: https://jasonet.co/posts/new-features-of-github-actions/#passing-data-to-future-steps 
+          asset_path: ./fonts.zip
+          asset_name: fonts.zip
+          asset_content_type: application/zip

.gitignore

@@ -11,7 +11,6 @@ config.json
 
 # Build Files
 fonts/*
-json/*
 script/*
 sprite/*
 css/unicons*

README.md

@@ -8,7 +8,7 @@
 It's easy to use Unicons on your website by just inserting following css. You can also download this repo and use the css from `css` folder.
 
 ```html
-<link rel="stylesheet" href="https://unicons.iconscout.com/release/v2.1.6/css/unicons.css">
+<link rel="stylesheet" href="https://unicons.iconscout.com/release/v2.1.7/css/unicons.css">
 ```
 
 And use the icons in your `body` as below.

package.json

@@ -1,11 +1,11 @@
 {
   "name": "@iconscout/unicons",
-  "version": "2.1.6",
+  "version": "2.1.7",
   "description": "Ready to use font icons for your next project",
   "scripts": {
     "line:build": "npm run line:download && npm run line:generate-fontello-config && npm run line:generate && npm run line:build-sprite",
     "line:download": "node scripts/line/download.js",
-    "line:generate": "node scripts/line/generate-fonts-css.js",
+    "line:generate": "node scripts/line/generate-fonts-css.js && node scripts/line/generate-single-font.js",
     "line:generate-fontello-config": "node scripts/line/generate-fontello-config.js",
     "line:build-sprite": "node scripts/line/build-sprite.js",
     "monochrome:build": "npm run monochrome:download && npm run monochrome:build-script",

scripts/line/download.js

@@ -5,21 +5,27 @@ const eachLimit = require('async/eachLimit')
 const uniq = require('lodash/uniq')
 const filter = require('lodash/filter')
 const sortBy = require('lodash/sortBy')
+const maxBy = require('lodash/maxBy')
 
 const countDuplicates = require('../utils/countDuplicates')
 const downloadImage = require('../utils/downloadImage')
 
 const targetPath = path.join(process.cwd(), 'json/line.json')
 const targetImagePath = path.join(process.cwd(), 'svg/line')
 
+const existingConfig = JSON.parse(fs.readFileSync(path.join(process.cwd(), 'json/line.json'), 'utf-8'))
+
 const url = process.env.API_DOWNLOAD_LINE
 const breakOnError = true
 
+const existingMaxIcon = maxBy(existingConfig, 'code')
+let startCharCode = existingMaxIcon ? existingMaxIcon.code : 59392
+
 if (!fs.existsSync(path.join(process.cwd(), 'json'))) {
   fs.mkdirSync(path.join(process.cwd(), 'json'))
 }
 
-console.log(`Download SVGs in ${process.cwd()}`)
+console.log(`Download SVGs in ${process.cwd()}. Max Char Code ${startCharCode}, Unicode ${startCharCode.toString(16)}.`)
 
 axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest'
 axios.defaults.headers.common['Accept'] = 'application/json'
@@ -59,7 +65,7 @@ const response = axios
     }
 
     // Download All the icons from Iconscout
-    eachLimit(icons, 20, async (row) => {
+    eachLimit(icons, 50, async (row) => {
       const url = row.svg
       // const ext = url.indexOf('.gif') === -1 ? 'jpg' : 'gif'
       const name = row.name
@@ -69,13 +75,18 @@ const response = axios
       try {
         await downloadImage(url, filePath)
 
+        const charCodeExists = existingConfig.find(i => i.name === name)
+        const charCode = charCodeExists && charCodeExists.code ? charCodeExists.code : startCharCode++
+
         data.push({
           id: row.id,
           name: name,
           svg: `svg/line/${fileName}`,
           category: row.category,
           style: 'Line',
-          tags: row.tags
+          tags: row.tags,
+          code: charCode,
+          unicode: charCode.toString(16)
         })
       } catch (error) {
         console.error(error)

scripts/line/generate-fontello-config.js

@@ -1,26 +1,24 @@
 const fs = require('fs-plus')
 const path = require('path')
 const Svgo = require('svgo')
-const glob = require('glob')
 const cheerio = require('cheerio')
 const uuidv4 = require('uuid/v4')
 const chunk = require('lodash/chunk')
+const sortBy = require('lodash/sortBy')
 const parse = require('parse-svg-path')
 const scale = require('scale-svg-path')
 const serialize = require('serialize-svg-path')
 
 const svgoConfig = require('./svgoConfig')
 const svgo = new Svgo(svgoConfig)
 
-const sourcePath = path.join(process.cwd(), 'svg/line', '**/*.svg')
+const lineJSONConfig = JSON.parse(fs.readFileSync(path.join(process.cwd(), 'json/line.json'), 'utf-8'))
 const targetFileDir = path.join(process.cwd(), 'dist/config')
 
 fs.removeSync(path.join(process.cwd(), 'dist'))
 fs.mkdirSync(path.join(process.cwd(), 'dist'))
 fs.mkdirSync(targetFileDir)
 
-let startCharCode = 59392
-
 const baseConfig = {
   "name": "unicons",
   "css_prefix_text": "uil-",
@@ -42,89 +40,77 @@ const saveConfig = (glyphs, name, file) => {
   fs.writeFileSync(file, JSON.stringify(config), 'utf-8')
 }
 
-glob(sourcePath, function (err, files) {
-  if (err) {
-    console.log(err)
-    return false
-  }
+const failedFiles = []
 
-  files = files.map((f) => path.normalize(f))
+// Create all svgo promises
+// We've to Sort the config so that we can generate proper Unicode-range limits in @font-face
+chunk(sortBy(lineJSONConfig, 'code'), 60).forEach((chunk, chunkIndex) => {
+  const promises = []
+  const configIcons = []
 
-  const failedFiles = []
-
-  // Create all svgo promises
-  chunk(files, 30).forEach((chunk, chunkIndex) => {
-    const promises = []
-    const configIcons = []
-    chunk.forEach((filename, ix) => {
-      let name = path.basename(filename).split('.')[0]
-      const content = fs.readFileSync(filename, 'utf-8')
-
-      const promise = svgo.optimize(content).then((result) => {
-        let data = result.data.replace(/<svg[^>]+>/gi, '').replace(/<\/svg>/gi, '')
-        // Get Path Content from SVG
-        const $ = cheerio.load(data, {
-          xmlMode: true
-        })
-
-        const svgPaths = $('path')
-        // console.log(svgPaths.length)
-        if (svgPaths.length === 1) {
-          const svgPath = svgPaths.attr('d')
-          const uid = uuidv4().replace(/-/g, '')
-
-          // Resize SVG Path to 1000 width
-          let path = parse(svgPath)
-          path = serialize(scale(path, 1000/24))
-
-          // Comment this line in production
-          // name = name.split(',')
-          // name = name[name.length - 1].toLocaleLowerCase().trim()
-
-          // name = `a${startCharCode}`
-
-          if (name && name !== '') {
-            configIcons.push({
-              "uid": uid,
-              "css": name,
-              "code": startCharCode++,
-              "src": "custom_icons",
-              "selected": true,
-              "svg": {
-                "path": path,
-                "width": 1000
-              },
-              "search": [
-                name
-              ]
-            })
-          } else {
-            console.log(`Skipped empty name ${filename}`)
-          }
-        } else {
-          failedFiles.push(name)
-          // console.error(name)
-        }
-      }).catch(e => {
-        console.error(e, filename)
-        throw e
+  chunk.forEach((icon) => {
+    const filename = icon.svg
+    let name = path.basename(filename).split('.')[0]
+    const content = fs.readFileSync(filename, 'utf-8')
+
+    const promise = svgo.optimize(content).then((result) => {
+      let data = result.data.replace(/<svg[^>]+>/gi, '').replace(/<\/svg>/gi, '')
+      // Get Path Content from SVG
+      const $ = cheerio.load(data, {
+        xmlMode: true
       })
-
-      promises.push(promise)
-    })
 
-    // On Complete all promise show status
-    Promise.all(promises).then(res => {
-      if (failedFiles.length) {
-        console.error('Icons Generation Failed for following files')
-        console.error(failedFiles)
-        throw new Error('Some icons are not in compound path')
+      const svgPaths = $('path')
+      // console.log(svgPaths.length)
+      if (svgPaths.length === 1) {
+        const svgPath = svgPaths.attr('d')
+        const uid = uuidv4().replace(/-/g, '')
+
+        // Resize SVG Path to 1000 width
+        let path = parse(svgPath)
+        path = serialize(scale(path, 1000/24))
+
+        if (name && name !== '') {
+          configIcons.push({
+            "uid": uid,
+            "css": name,
+            "code": icon.code,
+            "src": "custom_icons",
+            "selected": true,
+            "svg": {
+              "path": path,
+              "width": 1000
+            },
+            "search": [
+              name
+            ]
+          })
+        } else {
+          console.log(`Skipped empty name ${filename}`)
+        }
       } else {
-        const file = path.join(targetFileDir, `config${chunkIndex}.json`)
-        // Save Fontello Config
-        saveConfig(configIcons, `unicons-${chunkIndex}`, file)
-        console.log(`Fontello config generated to ${file}`)
+        failedFiles.push(name)
+        // console.error(name)
       }
+    }).catch(e => {
+      console.error(e, filename)
+      throw e
     })
+
+    promises.push(promise)
+  })
+
+  // On Complete all promise show status
+  Promise.all(promises).then(res => {
+    if (failedFiles.length) {
+      console.error('Icons Generation Failed for following files')
+      console.error(failedFiles)
+      throw new Error('Some icons are not in compound path')
+    } else {
+      const file = path.join(targetFileDir, `config${chunkIndex}.json`)
+      // Save Fontello Config
+      saveConfig(configIcons, `unicons-${chunkIndex}`, file)
+      console.log(`Fontello config generated to ${file}`)
+    }
   })
 })

scripts/line/generate-single-font.js

@@ -0,0 +1,40 @@
+const path = require('path')
+const glob = require('glob')
+const fs = require('fs-plus')
+const fontello = require('fontello-cli/lib/fontello')
+const sourcePath = path.join(process.cwd(), 'dist/config/*.json')
+const targetPath = path.join(process.cwd(), 'dist/config.json')
+const fontsPath = path.join(process.cwd(), 'dist/fonts')
+const cssTempPath = path.join(process.cwd(), 'dist/')
+
+if (!fs.existsSync(fontsPath)) {
+  fs.mkdirSync(fontsPath)
+}
+
+glob(sourcePath, (err, files) => {
+  const allFilesJSONArray = files.map(f => {
+    return JSON.parse(fs.readFileSync(f))
+  })
+
+  const allFilesJSON = {
+    ...allFilesJSONArray[0],
+    name: 'unicons'
+  }
+
+  allFilesJSONArray.forEach(j => {
+    allFilesJSON.glyphs = [
+      ...allFilesJSON.glyphs,
+      ...j.glyphs
+    ]
+  })
+
+  console.log(`Merging total ${allFilesJSONArray.length} configs.`)
+  fs.writeFileSync(targetPath, JSON.stringify(allFilesJSON), 'utf-8')
+
+  fontello.install({
+    config: targetPath,
+    css: cssTempPath,
+    font: fontsPath
+  })
+})
+