diff --git a/build/build-js-files.js b/build/build-js-files.js new file mode 100644 index 000000000..49be378c2 --- /dev/null +++ b/build/build-js-files.js @@ -0,0 +1,96 @@ +const fs = require('fs') +console.log(process.argv.join(',')) +const directory = process.argv.join(',').includes('flags') ? 'flags/' : + process.argv.join(',').includes('brands') ? 'brands/' : '' + +let dirname = `${directory}svg/` +fs.readdir(dirname, function(e, filenames) { + if (e) { + return + } + let contents = {} + let names = [] + filenames.forEach(function(filename) { + fs.readFile(dirname + filename, 'utf-8', function(e, content) { + if (e) { + return + } else { + const variableName = getVariableName(filename, directory) + const jsFilename = filename.replace('.svg', '.js') + 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/g, '').replace(/"/g, '\'') + .replace('', '') + iconData.push(computedContent) + + contents[variableName] = iconData + names.push({ jsFilename, variableName}) + fs.writeFile( + `${directory}js/${jsFilename}`, + `export const ${variableName} = ` + JSON.stringify(iconData), + () => '' + ) + } + }) + }) + setTimeout(() => { + fs.writeFile( + `${directory}js/icon-set.js`, + 'export const iconSet = ' + JSON.stringify(contents), + () => '' + ) + fs.writeFile( + `${directory}index.js`, + getImports(names), + () => '' + ) + }, 1000) + +}) + +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') + return string.match(regex, '')[0] + .match(/"(.*?)"/ig, '')[0] + .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) { + return str.replace(/([-_][a-z])/ig, ($1) => { + return $1.toUpperCase().replace('-', '') + }) +} + +function getImports(names) { + const defaultImport = "import { iconSet } from './js/icon-set.js' \n" + const defaultExport = "export { iconSet } \n\n\n" + const importString = names.map(name => { + return `import { ${name.variableName} } from './js/${name.jsFilename}'` + }).join('\n') + const exportString = names.map(name => { + return `export { ${name.variableName} }` + }).join('\n') + return defaultImport + defaultExport + importString + '\n' + exportString +} diff --git a/build/change-name.js b/build/change-name.js new file mode 100644 index 000000000..235e8e827 --- /dev/null +++ b/build/change-name.js @@ -0,0 +1,22 @@ +let fs = require('fs') +let dirname = '1x1/' +fs.readdir(dirname, function(e, filenames) { + if (e) { + return + } + let contents = {} + filenames.forEach(function(filename) { + fs.readFile(dirname + filename, 'utf-8', function(e, content) { + if (e) { + return + } else { + const name = filename.replace('.svg', 'q.svg') + fs.writeFile( + `1x1/${name}`, + content, + () => '' + ) + } + }) + }) +}) diff --git a/build/iconsScript.js b/build/iconsScript.js deleted file mode 100644 index ddefed95e..000000000 --- a/build/iconsScript.js +++ /dev/null @@ -1,69 +0,0 @@ -let fs = require('fs') -let dirname = 'svg/' -fs.readdir(dirname, function(e, filenames) { - if (e) { - return - } - let contents = {} - filenames.forEach(function(filename) { - fs.readFile(dirname + filename, 'utf-8', function(e, content) { - if (e) { - return - } else { - let name = filename.replace('.svg', '') - // let pascalName = toPascalCase(name) - let camelName = toCamel(name) - let computedContent = content.replace(/(]+)>)|(<\/svg>)/ig, '') - .replace(/\n/g, '') - .split('').pop() - - contents[camelName] = computedContent - - fs.writeFile( - `js/${camelName}.js`, - `export const ${camelName} = ` + JSON.stringify(computedContent), - () => '' - ) - } - }) - }) - setTimeout(() => { - fs.writeFile( - 'js/iconsGenerated.js', - 'export const icons = ' + JSON.stringify(contents), - () => '' - ) - fs.writeFile( - 'js/index.js', - getImports(Object.keys(contents)), - () => '' - ) - }, 1000) - -}) - -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 toCamel = (str) => { - return str.replace(/([-_][a-z])/ig, ($1) => { - return $1.toUpperCase().replace('-', '') - }) -} - -function getImports(filenames) { - const defaultImport = "import { icons } from './iconsGenerated.js' \n" - const defaultExport = "export default icons \n\n\n" - const importString = filenames.map(name => { - return `import { ${name} } from './${name}.js'` - }).join('\n') - const exportString = filenames.map(name => { - return `export { ${name} }` - }).join('\n') - return defaultImport + defaultExport + importString + '\n' + exportString -} diff --git a/package.json b/package.json index 20b46fd47..3be6a8461 100644 --- a/package.json +++ b/package.json @@ -4,6 +4,7 @@ "description": "Free icons", "main": "js/index.js", "style": "css/coreui-icons.css", + "sideEffects": false, "scripts": { "css": "npm-run-all --parallel css-compile* --sequential css-prefix css-minify*", "css-compile": "node-sass --output-style expanded --source-map true --source-map-contents true --precision 6 scss/coreui-icons.scss css/coreui-icons.css", @@ -11,7 +12,10 @@ "css-minify": "cleancss --level 1 --source-map --source-map-inline-sources --output css/coreui-icons.min.css css/coreui-icons.css", "dist": "npm-run-all --parallel css", "watch-css": "nodemon --ignore dist/ -e scss -x \"npm run css\"", - "iconsJsBuild": "node build/iconsScript.js" + "buildJsFiles": "npm-run-all --parallel buildBaseJsFiles buildBrandsJsFiles buildFlagsJsFiles", + "buildBaseJsFiles": "node build/build-js-files.js", + "buildBrandsJsFiles": "node build/build-js-files.js brands", + "buildFlagsJsFiles": "node build/build-js-files.js flags" }, "repository": { "type": "git",