diff options
Diffstat (limited to 'utils/create-svg-icons-map.js')
-rw-r--r-- | utils/create-svg-icons-map.js | 95 |
1 files changed, 95 insertions, 0 deletions
diff --git a/utils/create-svg-icons-map.js b/utils/create-svg-icons-map.js new file mode 100644 index 0000000..aec459c --- /dev/null +++ b/utils/create-svg-icons-map.js @@ -0,0 +1,95 @@ +const fs = require('fs'); +const path = require('path'); +const svgFolder = path.resolve(__dirname + '/../assets/sdc-icons/'); +const iconMapFile = path.resolve(__dirname + '/../src/common/icons-map.json'); +const iconMapTSFile = path.resolve(__dirname + '/../src/common/icons-map.ts'); +const disallowedSvgAttributes = ['fill', 'id', 'width', 'height']; +const disallowedSvgStyle = ['fill']; +const disallowedSvgInlineAttributes = ['fill', 'id']; +const disallowedSvgInlineStyle = ['fill']; + +function _escapeStrRegex(str) { + return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); +} +function _makeSvgAttributesRegex(attrs) { + return new RegExp(`\s*(${attrs.map(_escapeStrRegex).join('|')})\s*=\s*("|')[^"']*\\2`, 'g'); +} +function _makeSvgStyleRegex(attrs) { + return new RegExp(`\s*${attrs.map(_escapeStrRegex).join('|')}\s*:[^'";]*;?`, 'g'); +} + +// prepare +const disallowedSvgAttributesRegex = _makeSvgAttributesRegex(disallowedSvgAttributes); +const disallowedSvgStyleRegex = _makeSvgStyleRegex(disallowedSvgStyle); +const disallowedSvgInlineAttributesRegex = _makeSvgAttributesRegex(disallowedSvgInlineAttributes); +const disallowedSvgInlineStyleRegex = _makeSvgStyleRegex(disallowedSvgInlineStyle); + +function addIcon(iconsObject, iconName, iconPath) { + let iconContent = fs.readFileSync(iconPath).toString(); + if (!iconContent) { + return; + } + + let iconInfoMsg = ''; + + // clean the first <svg> tag + iconContent = iconContent.replace(/<svg\b[^>]*>/, (svgTag) => { + let cleanedNum = 0; + const disallowedSvgAttributesMatch = svgTag.match(disallowedSvgAttributesRegex); + if (disallowedSvgAttributesMatch) { + svgTag = svgTag.replace(disallowedSvgAttributesRegex, ''); + cleanedNum += disallowedSvgAttributesMatch.length; + } + const disallowedSvgStyleMatch = svgTag.match(disallowedSvgStyleRegex); + if (disallowedSvgStyleMatch) { + svgTag = svgTag.replace(disallowedSvgStyleRegex, ''); + cleanedNum += disallowedSvgStyleMatch.length; + } + iconInfoMsg += 'ADDED'; + if (cleanedNum > 0) { + iconInfoMsg += `\n\t(cleaned ${cleanedNum} attributes and styles)`; + } + return svgTag; + }); + + const disallowedSvgInlineAttributesMatch = iconContent.match(disallowedSvgInlineAttributesRegex); + if (disallowedSvgInlineAttributesMatch) { + iconInfoMsg += `\n\t* CHECK for ${disallowedSvgInlineAttributesMatch.length} inline attributes [${disallowedSvgInlineAttributes.join(', ')}]`; + } + const disallowedSvgInlineStyleMatch = iconContent.match(disallowedSvgInlineStyleRegex); + if (disallowedSvgInlineStyleMatch) { + iconInfoMsg += `\n\t* CHECK for ${disallowedSvgInlineStyleMatch.length} inline styles [${disallowedSvgInlineStyle.join(', ')}]`; + } + + console.log(`# ${iconName}: ${iconInfoMsg}`); + + iconsObject[iconName] = iconContent; +} + +function main() { + const iconMapDir = path.dirname(iconMapFile); + if (!fs.existsSync(iconMapDir)) { + fs.mkdirSync(iconMapDir); + } + + const iconsObject = {}; + fs.readdirSync(svgFolder).forEach((file) => { + const fileName = file.split('.', 2)[0]; + const fileExtension = file.split('.', 2)[1]; + if (fileExtension === 'svg') { + const filePath = svgFolder + '/' + file; + if (fs.existsSync(filePath)) { + addIcon(iconsObject, fileName, filePath); + } + } + }); + + const dataToWrite = JSON.stringify(iconsObject); + + fs.writeFileSync(iconMapFile, dataToWrite); + fs.writeFileSync(iconMapTSFile, `export default ${dataToWrite};`); + + console.log(`Icons Map JSON created! [${iconMapFile}]`); +} + +main(); |