optimize code

bin/build.js

@@ -6,7 +6,7 @@ const format = require('prettier-eslint')
 const upperCamelCase = require('uppercamelcase')
 const processSvg = require('./processSvg')
 const style = process.env.npm_package_config_style || 'stroke'
-const { defaultAttrs, getElementCode } = require(`./template-${style}`)
+const { getAttrs, getElementCode } = require('./template')
 const icons = require('../src/data.json')
 
 const rootDir = path.join(__dirname, '..')
@@ -64,7 +64,7 @@ const generateIconCode = async ({name}) => {
   const ComponentName = (name === 'github') ? 'GitHub' : upperCamelCase(name)
   const code = fs.readFileSync(location)
   const svgCode = await processSvg(code)
-  const element = getElementCode(ComponentName, attrsToString(defaultAttrs), svgCode)
+  const element = getElementCode(ComponentName, attrsToString(getAttrs(style)), svgCode)
   const component = format({
     text: element,
     eslintConfig: {

bin/processSvg.js

 const Svgo = require('svgo');
 const cheerio = require('cheerio')
 
+/**
+ * Convert string to CamelCase.
+ * @param {string} str - A string.
+ * @returns {string}
+ */
+function CamelCase(str) {
+  return str.replace(/(^|-)([a-z])/g, (_, __, c) => c.toUpperCase())
+}
+
 /**
  * Optimize SVG with `svgo`.
  * @param {string} svg - An SVG string.
@@ -41,6 +50,7 @@ async function processSvg(svg) {
     // remove semicolon inserted by prettier
     // because prettier thinks it's formatting JSX not HTML
     .then(svg => svg.replace(/;/g, ''))
+    .then(svg = svg.replace(/([a-z]+)-([a-z]+)=/g, (_, a, b) => `${a}${CamelCase(b)}=`))
     .then(removeSVGElement)
   return optimized;
 }

bin/template-stroke.js

-const defaultAttrs = {
-  xmlns: 'http://www.w3.org/2000/svg',
-  width: 'size',
-  height: 'size',
-  viewBox: '0 0 24 24',
-  fill: 'none',
-  stroke: 'color',
-  strokeWidth: 2,
-  strokeLinecap: 'round',
-  strokeLinejoin: 'round',
-  otherProps: '...otherProps',
-}
-
-const getElementCode = (ComponentName, attrs, svgCode) => `
-  import React from 'react';
-  import PropTypes from 'prop-types';
-
-  const ${ComponentName} = (props) => {
-    const { color, size, ...otherProps } = props;
-    return (
-      <svg ${attrs}>
-        ${svgCode}
-      </svg>
-    )
-  };
-
-  ${ComponentName}.propTypes = {
-    color: PropTypes.string,
-    size: PropTypes.oneOfType([
-      PropTypes.string,
-      PropTypes.number
-    ]),
-  }
-
-  ${ComponentName}.defaultProps = {
-    color: 'currentColor',
-    size: '24',
-  }
-
-  export default ${ComponentName}
-`
-
-module.exports = { defaultAttrs, getElementCode }

bin/template-fill.js → bin/template.js

-const defaultAttrs = {
-  xmlns: 'http://www.w3.org/2000/svg',
-  width: 'size',
-  height: 'size',
-  viewBox: '0 0 24 24',
-  fill: 'color',
-  otherProps: '...otherProps',
+const getAttrs = (style) => {
+  const baseAttrs = {
+    xmlns: 'http://www.w3.org/2000/svg',
+    width: 'size',
+    height: 'size',
+    viewBox: '0 0 24 24',
+  }
+  const fillAttrs = {
+    fill: 'color',
+    otherProps: '...otherProps'
+  }
+  const strokeAttrs = {
+    stroke: 'color',
+    strokeWidth: 2,
+    strokeLinecap: 'round',
+    strokeLinejoin: 'round',
+    otherProps: '...otherProps'
+  }
+  return Object.assign({}, baseAttrs, style==='fill' ? fillAttrs : strokeAttrs)
 }
 
 const getElementCode = (ComponentName, attrs, svgCode) => `
@@ -36,4 +48,4 @@ const getElementCode = (ComponentName, attrs, svgCode) => `
   export default ${ComponentName}
 `
 
-module.exports = { defaultAttrs, getElementCode }
+module.exports = { getAttrs, getElementCode }

package.json

@@ -31,7 +31,7 @@
     "build": "concurrently \"yarn:build:*\""
   },
   "config": {
-    "style": "fill"
+    "style": "stroke"
   },
   "license": "MIT",
   "devDependencies": {