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 = {
+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',
+ 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": {