Commit 12600dfb authored by Jun's avatar Jun

optimize code

parent fdc38c62
...@@ -6,7 +6,7 @@ const format = require('prettier-eslint') ...@@ -6,7 +6,7 @@ const format = require('prettier-eslint')
const upperCamelCase = require('uppercamelcase') const upperCamelCase = require('uppercamelcase')
const processSvg = require('./processSvg') const processSvg = require('./processSvg')
const style = process.env.npm_package_config_style || 'stroke' 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 icons = require('../src/data.json')
const rootDir = path.join(__dirname, '..') const rootDir = path.join(__dirname, '..')
...@@ -64,7 +64,7 @@ const generateIconCode = async ({name}) => { ...@@ -64,7 +64,7 @@ const generateIconCode = async ({name}) => {
const ComponentName = (name === 'github') ? 'GitHub' : upperCamelCase(name) const ComponentName = (name === 'github') ? 'GitHub' : upperCamelCase(name)
const code = fs.readFileSync(location) const code = fs.readFileSync(location)
const svgCode = await processSvg(code) const svgCode = await processSvg(code)
const element = getElementCode(ComponentName, attrsToString(defaultAttrs), svgCode) const element = getElementCode(ComponentName, attrsToString(getAttrs(style)), svgCode)
const component = format({ const component = format({
text: element, text: element,
eslintConfig: { eslintConfig: {
......
const Svgo = require('svgo'); const Svgo = require('svgo');
const cheerio = require('cheerio') 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`. * Optimize SVG with `svgo`.
* @param {string} svg - An SVG string. * @param {string} svg - An SVG string.
...@@ -41,6 +50,7 @@ async function processSvg(svg) { ...@@ -41,6 +50,7 @@ async function processSvg(svg) {
// remove semicolon inserted by prettier // remove semicolon inserted by prettier
// because prettier thinks it's formatting JSX not HTML // because prettier thinks it's formatting JSX not HTML
.then(svg => svg.replace(/;/g, '')) .then(svg => svg.replace(/;/g, ''))
.then(svg = svg.replace(/([a-z]+)-([a-z]+)=/g, (_, a, b) => `${a}${CamelCase(b)}=`))
.then(removeSVGElement) .then(removeSVGElement)
return optimized; return optimized;
} }
......
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 }
const defaultAttrs = { const getAttrs = (style) => {
xmlns: 'http://www.w3.org/2000/svg', const baseAttrs = {
width: 'size', xmlns: 'http://www.w3.org/2000/svg',
height: 'size', width: 'size',
viewBox: '0 0 24 24', height: 'size',
fill: 'color', viewBox: '0 0 24 24',
otherProps: '...otherProps', }
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) => ` const getElementCode = (ComponentName, attrs, svgCode) => `
...@@ -36,4 +48,4 @@ const getElementCode = (ComponentName, attrs, svgCode) => ` ...@@ -36,4 +48,4 @@ const getElementCode = (ComponentName, attrs, svgCode) => `
export default ${ComponentName} export default ${ComponentName}
` `
module.exports = { defaultAttrs, getElementCode } module.exports = { getAttrs, getElementCode }
...@@ -31,7 +31,7 @@ ...@@ -31,7 +31,7 @@
"build": "concurrently \"yarn:build:*\"" "build": "concurrently \"yarn:build:*\""
}, },
"config": { "config": {
"style": "fill" "style": "stroke"
}, },
"license": "MIT", "license": "MIT",
"devDependencies": { "devDependencies": {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment