diff --git a/.gitignore b/.gitignore index 1c7805f..72e6efe 100644 --- a/.gitignore +++ b/.gitignore @@ -2,6 +2,5 @@ node_modules *.log .DS_Store dist -lib coverage -.idea/ \ No newline at end of file +.idea/ diff --git a/bin/svg-icon-generate.js b/bin/svg-icon-generate.js index 249025d..92ac42e 100644 --- a/bin/svg-icon-generate.js +++ b/bin/svg-icon-generate.js @@ -3,16 +3,20 @@ const path = require('path'); const configureGenerator = require('../lib/configureGenerator'); const argv = require('yargs') - .default('reactPureRender', true) - .default('radium', true) - .default('native', false) - .default('keepFillColor', false) - .default('template', path.join(__dirname, '..', 'template', 'icon.nunjucks')) + .options({ + reactPureRender: { type: "boolean", default: true }, + radium: { type: "boolean", default: true }, + native: { type: "boolean", default: false }, + keepFillColor: { type: "boolean", default: false }, + template: { type: "string", default: path.join(__dirname, '..', 'template', 'icon-tsx.nunjucks') }, + verbose: { type: "boolean", default: false }, + }) .usage('Usage: \n$0 --svgDir [./assets/svgs] --destination [./src/components/Icon.jsx]') - .demandOption(['svgDir','destination']) - .argv; + .demandOption(['svgDir', 'destination']) + .argv -console.log('Running SVG Icon generator with the following options:'); -console.log(JSON.stringify(argv, null, 2)); +if (argv.verbose) { + console.table(argv); +} configureGenerator(argv)(); diff --git a/lib/configureGenerator.js b/lib/configureGenerator.js new file mode 100644 index 0000000..98ffa7f --- /dev/null +++ b/lib/configureGenerator.js @@ -0,0 +1,89 @@ +'use strict'; + +exports.__esModule = true; +exports['default'] = configureGenerator; + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } + +var _fs = require('fs'); + +var _fs2 = _interopRequireDefault(_fs); + +var _helpersGetSvgsInDir = require('./helpers/getSvgsInDir'); + +var _helpersGetSvgsInDir2 = _interopRequireDefault(_helpersGetSvgsInDir); + +var _helpersMinifySvg = require('./helpers/minifySvg'); + +var _helpersMinifySvg2 = _interopRequireDefault(_helpersMinifySvg); + +var _nunjucks = require('nunjucks'); + +var _nunjucks2 = _interopRequireDefault(_nunjucks); + +var _path = require('path'); + +var _path2 = _interopRequireDefault(_path); + +var _helpersCleanup = require('./helpers/cleanup'); + +_nunjucks2['default'].configure({ autoescape: false }); + +var defaultComment = 'Generated by gulp svg-icon - do not modify manually'; +var defaultComponentName = 'Icon'; + +function configureGenerator(config) { + return function () { + var componentName = config.componentName || defaultComponentName; + var defaultTemplate = config.native ? _path2['default'].join(__dirname, '..', 'template', 'icon_native.nunjucks') : _path2['default'].join(__dirname, '..', 'template', 'icon-tsx.nunjucks'); + var template = config.template || defaultTemplate; + var templateFile = _path2['default'].isAbsolute(template) ? template : _path2['default'].join(process.cwd(), template); + var templateContent = _fs2['default'].readFileSync(templateFile).toString(); + + var svgDir = _path2['default'].isAbsolute(config.svgDir) ? config.svgDir : _path2['default'].join(process.cwd(), config.svgDir); + + console.log('Looking for SVGs in:', svgDir); // eslint-disable-line no-console + + console.log('Using ' + componentName + ' template from:', templateFile); // eslint-disable-line no-console + + var svgs = _helpersGetSvgsInDir2['default'](svgDir); + + var iconDestination = config.destination || _path2['default'].join(process.cwd(), 'Icon.react.js'); + + var comment = config.comment || defaultComment; + var reactPureRender = config.reactPureRender; + var cleanupHelper = config.native ? _helpersCleanup.cleanupNativeSvg : _helpersCleanup.cleanupSvg; + + var svgPromises = svgs.map(function (file) { + return _helpersMinifySvg2['default'](file, _fs2['default'].readFileSync(file).toString()); + }); + Promise.all(svgPromises).then(function (results) { + var icons = results.map(function (result) { + return { + name: _helpersCleanup.cleanupName(result.name), + svg: cleanupHelper(result.svg.data, config.keepFillColor) + }; + }).sort(function (a, b) { + return a.name.localeCompare(b.name); + }); + + _fs2['default'].writeFileSync(iconDestination, _nunjucks2['default'].renderString(templateContent, { + icons: icons, + comment: comment, + reactPureRender: reactPureRender, + radium: config.radium, + useColorProp: !config.keepFillColor, + componentName: componentName + })); + + console.log('Generated ' + componentName + ' component to:', iconDestination); // eslint-disable-line no-console + console.log(icons.map(function (icon) { + return '<' + componentName + ' kind="' + icon.name + '" />'; + }).join('\n')); // eslint-disable-line no-console + })['catch'](function (error) { + return console.error(error); + }); // eslint-disable-line no-console + }; +} + +module.exports = exports['default']; \ No newline at end of file diff --git a/lib/helpers/cleanup.js b/lib/helpers/cleanup.js new file mode 100644 index 0000000..a270004 --- /dev/null +++ b/lib/helpers/cleanup.js @@ -0,0 +1,35 @@ +'use strict'; + +exports.__esModule = true; +exports.cleanupName = cleanupName; +exports.cleanupSvg = cleanupSvg; +exports.cleanupNativeSvg = cleanupNativeSvg; +function _camelCase(string) { + return string.replace(/^.|-./g, function (letter, index) { + return index === 0 ? letter.toLowerCase() : letter.substr(1).toUpperCase(); + }); +} + +function _basicCleanup(svg) { + return svg.replace(/width="\S+"/, '').replace(/height="\S+"/, '').replace(/xmlns="(\S*)"/, '').replace(/data-name="(.*?)"/, '').replace(/([\w-]+)="/g, function (match) { + return _camelCase(match); + }).replace(/\s{2,}/g, ' ').replace(/xlink\:href="(\S*)"/g, 'xlinkHref="$1"').replace(/xmlns\:xlink="(\S*)"/g, 'xmlnsXlink="$1"').replace(/