diff --git a/build/build-examples.js b/build/build-examples.js index f2d788438..a3baf1a58 100644 --- a/build/build-examples.js +++ b/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) => { - if (err) { - return - } + mkdirp(examplesDir).then(() => { + 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 += `
\n` }) - html += ` \n
\n` - html += `
\n` - unique(icons, 'name').forEach(icon => { - const name = icon.name - html += `
Your browser does not support SVGs
\n` - }) html += `
\n` html += `\n` @@ -63,4 +55,4 @@ const main = () => { }) } -main() +main() \ No newline at end of file diff --git a/build/build-fonts.js b/build/build-fonts.js index 0fe54376b..7b32cc49d 100644 --- a/build/build-fonts.js +++ b/build/build-fonts.js @@ -19,8 +19,7 @@ webfont({ verbose: true, }).then(result => { - mkdirp(fontDir, (err) => { - if (err) throw err + mkdirp(fontDir).then(() => { 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) => - a1.map(itm => ({ - ...a2.find((item) => (item.name === itm.name) && item), - ...itm + const mergeByName = (a1, a2) => a1.map(itm => ({ + ...a2.find((item) => (item.name === itm.name) && item), + ...itm })) - json = JSON.stringify({ - "icons": mergeByName(obj.icons, iconsList) - }, null, 2) + json = JSON.stringify(mergeByName(obj, iconsList), null, 2) fs.writeFileSync(`${dataDir}/${argv.name.replace('CoreUI-Icons-', '')}.json`, json) }) diff --git a/build/build-icons-lists.js b/build/build-icons-lists.js deleted file mode 100644 index 05db1c715..000000000 --- a/build/build-icons-lists.js +++ /dev/null @@ -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() \ No newline at end of file diff --git a/build/build-js-files.js b/build/build-js-files.js index 825c41e50..004418ac7 100644 --- a/build/build-js-files.js +++ b/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) { - if (err) { - return - } + mkdirp(`js/${setName}/`).then(() => { const dirname = `svg/${setName}/` - fs.readdir(dirname, (e, filenames) => { - if (e) { - return - } - let contents = {} - let names = [] - filenames.forEach(filename => { - console.log(filename) - if (extname(filename) === '.svg') { - fs.readFile(dirname + filename, 'utf-8', function (e, content) { - if (e) { - 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 contents = {} + let names = [] + fs.readdirSync(dirname).forEach(filename => { + console.log(filename) + if (extname(filename) === '.svg') { + const content = fs.readFileSync(dirname + filename, {encoding:'utf8'}) + 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 = [] - if (dimensions !== '64 64') { - iconData.push(dimensions) - } - const computedContent = - content - .replace(/(]+)>)|(<\/svg>)/ig, '') - .replace(/\n\s\s+/g, '') - .replace(/\n/g, '') - .replace(/"/g, '\'') - .replace('', '') - 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[];`, - () => '' - ) - }) + let iconData = [] + if (dimensions !== '64 64') { + iconData.push(dimensions) } - }) - setTimeout(() => { - fs.writeFile( - `js/${setName}/${setName}-set.js`, - `export const ${setName}Set = ` + JSON.stringify(contents), - () => '' + const computedContent = + content + .replace(/(]+)>)|(<\/svg>)/ig, '') + .replace(/\n\s\s+/g, '') + .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`, - typings(names, setName, false), - () => '' + + // Create typings for single icon + 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 = '' - Object.keys(allNames).forEach(set => { - imports += getImports(allNames[set], set, true) - imports += '\n\n\n' - }) - 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('') -// } +let imports = '' +Object.keys(allNames).forEach(set => { + imports += getImports(allNames[set], set, true) + imports += '\n\n\n' +}) +fs.writeFileSync(`index.js`, imports) const getAttributeValue = (string, attribute) => { const regex = new RegExp(`${attribute}="([^"]+)"`, 'g') @@ -128,21 +82,13 @@ const getAttributeValue = (string, attribute) => { .replace(/"/g, '') } -// function getVariableName (filename, directory) { -// if (directory.includes('flags')) { -// return filename.replace('.svg', '').replace(/-/g, '').toUpperCase() -// } else { -// return toCamel(filename.replace('.svg', '')) -// } -// } - -function toCamel (str) { +const 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') diff --git a/build/build-png.js b/build/build-png.js index ce855c9ad..d9784891b 100644 --- a/build/build-png.js +++ b/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) { - if (err) { - return - } - + mkdirp(`${dest}${setName}/${size}x${size}/`).then(() => { svgs.forEach((svg) => { const file = dirname + svg sharp(file, { density: 72 * size / 16 }) diff --git a/build/build-svg-sprites.js b/build/build-svg-sprites.js index 6f17ddce4..a161dc92c 100644 --- a/build/build-svg-sprites.js +++ b/build/build-svg-sprites.js @@ -21,11 +21,7 @@ const getAttributeValue = (string, attribute) => { .replace(/"/g, '') } -mkdirp('sprites/', function(err) { - if (err) { - return - } - +mkdirp('sprites/').then(() => { 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>)/ig, '') .replace(/\n\s\s+/g, '') .replace(/\n/g, '') + .replace(/"/g, '\'') .replace('', '') - symbol = ` \n ${computedContent}\n ` + symbol = `\n ${computedContent}\n` idx === svgs.length - 1 ? symbols.push(symbol) : symbols.push(`${symbol}\n`) }) fs.writeFile( `sprites/${setName}.svg`, ``, () => '' ) diff --git a/build/build-variables.js b/build/build-variables.js index 8952b3c40..09517095b 100644 --- a/build/build-variables.js +++ b/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) { diff --git a/build/svgo.yml b/build/svgo.yml deleted file mode 100644 index 7a815d7bb..000000000 --- a/build/svgo.yml +++ /dev/null @@ -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 \ No newline at end of file diff --git a/package.json b/package.json index ed3bd2ed9..e787e3077 100644 --- a/package.json +++ b/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", - "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", + "clean": "rimraf css js/{brand,flag,free} png sprites", "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", - "minimist": "^1.2.0", - "mkdirp": "^0.5.1", - "node-sass": "^4.13.0", + "http-server": "^0.12.3", + "minimist": "^1.2.5", + "mkdirp": "^1.0.4", + "node-sass": "^4.14.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", - "stylelint-config-standard": "^19.0.0", - "stylelint-order": "^3.1.1", - "stylelint-scss": "^3.12.1", - "svgo": "^1.3.2", + "postcss-cli": "^7.1.1", + "rimraf": "^3.0.2", + "sharp": "^0.25.2", + "shelljs": "^0.8.4", + "stylelint": "^13.3.3", + "stylelint-config-recommended-scss": "^4.2.0", + "stylelint-config-standard": "^20.0.0", + "stylelint-order": "^4.0.0", + "stylelint-scss": "^3.17.1", "webfont": "^9.0.0" }, "files": [ "css/", "fonts/", "js/", - "png/", "scss/", "sprites/", "svg/"