add style condition

.github/workflows/push.yml

@@ -17,6 +17,7 @@ jobs:
  - uses: actions/setup-node@v1
  with:
  node-version: '10.x'
+ always-auth: true
  - run: yarn install
  - name: Figma Action
  uses: primer/[email protected]
@@ -27,7 +28,7 @@ jobs:
  FIGMA_TOKEN: ${{ secrets.FIGMA_TOKEN }}
  - run: yarn generate
  - run: yarn build
- - run: echo "//registry.npmjs.org/:_authToken=${{ secrets.NPM_AUTH_TOKEN }}" > ~/.npmrc
+ # - run: echo "//registry.npmjs.org/:_authToken=${{ secrets.NPM_AUTH_TOKEN }}" > ~/.npmrc
  - run: yarn publish
  env:
  NODE_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }}

bin/build.js

@@ -3,9 +3,9 @@
 const path = require('path')
 const fs = require('fs')
 const format = require('prettier-eslint')
-const upperCamelCase = require('uppercamelcase')
 const processSvg = require('./processSvg')
-const style = process.env.npm_package_config_style || 'stroke'
+const { parseName } = require('./utils')
+const defaultStyle = process.env.npm_package_config_style || 'stroke'
 const { getAttrs, getElementCode } = require('./template')
 const icons = require('../src/data.json')
 
@@ -47,7 +47,7 @@ const generateIndex = () => {
 const attrsToString = (attrs) => {
  return Object.keys(attrs).map((key) => {
  // should distinguish fill or stroke
- if (key === 'width' || key === 'height' || key === style) {
+ if (key === 'width' || key === 'height' || key === 'fill' || key === 'stroke') {
  return key + '={' + attrs[key] + '}';
  }
  if (key === 'otherProps') {
@@ -59,12 +59,14 @@ const attrsToString = (attrs) => {
 
 // generate icon code separately
 const generateIconCode = async ({name}) => {
- const location = path.join(rootDir, 'src/svg', `${name}.svg`)
- const destination = path.join(rootDir, 'src/icons', `${name}.js`)
- const ComponentName = (name === 'github') ? 'GitHub' : upperCamelCase(name)
+ const names = parseName(name, defaultStyle)
+ console.log(names)
+ const location = path.join(rootDir, 'src/svg', `${names.name}.svg`)
+ const destination = path.join(rootDir, 'src/icons', `${names.name}.js`)
  const code = fs.readFileSync(location)
  const svgCode = await processSvg(code)
- const element = getElementCode(ComponentName, attrsToString(getAttrs(style)), svgCode)
+ const ComponentName = names.componentName
+ const element = getElementCode(ComponentName, attrsToString(getAttrs(names.style)), svgCode)
  const component = format({
  text: element,
  eslintConfig: {
@@ -80,7 +82,7 @@ const generateIconCode = async ({name}) => {
  fs.writeFileSync(destination, component, 'utf-8');
 
  console.log('Successfully built', ComponentName);
- return {ComponentName, name}
+ return {ComponentName, name: names.name}
 }
 
 // append export code to index.js

bin/export.js

-const fs = require('fs')
-const path = require('path')
-const rp = require('request-promise')
-const processSvg = require('./processSvg')
-require('dotenv').config()
-
-const figmaToken = process.env.FIGMA_TOKEN
-const fileKey = process.env.FILE_KEY
-
-// 获取元素节点
-const getNodes = async function () {
- const nodes = await rp({
- url: `https://api.figma.com/v1/files/${fileKey}`,
- headers: {
- 'X-FIGMA-TOKEN': figmaToken
- }
- })
- console.log('get Nodes successfully!')
- return nodes
-}
-
-// 获取 SVG
-const getSvgs = async function (ids) {
- const svgs = await rp({
- url: `https://api.figma.com/v1/images/${fileKey}`,
- headers: {
- 'X-FIGMA-TOKEN': figmaToken
- },
- qs: { ids, format: 'svg' }
- })
- console.log('get SVG url successfully!')
- return svgs
-}
-
-// 获取 SVG 代码
-// 输出 { name: 'share', code: '<svg>...</svg>' }
-const getSvgCode = async function (icons, url, key) {
- const svgCode = await rp(url)
- const code = await processSvg(svgCode)
- const current = icons.find(icon => {
- return icon.id===key
- })
- console.log(`get ${current.name} code successfully!`)
- return { name: current.name, code }
-}
-
-// 导出 SVG 文件
-const exportSvgs = async function (iconsArg) {
- let icons
- if (iconsArg) {
- icons = iconsArg
- } else {
- // 输出 [{id: '1', name: 'activity'}]
- icons = await getNodes()
- .then(res => {
- const { components } = JSON.parse(res)
- return Object
- .keys(components)
- .map(key => ({id: key, name: components[key].name}))
- })
- }
- // 输出 '1,2,3,6'
- const ids = icons.map(icon => icon.id).join()
-
- // 输出 {'1': 'https://path/to/svg'}
- const svgUrls = await getSvgs(ids)
- .then(res => {
- const svgs = JSON.parse(res).images
- return svgs
- })
-
- // 添加 code，生成 json 文件
- const iconsPromises = Object.keys(svgUrls)
- .map(async key => await getSvgCode(icons, svgUrls[key], key))
- const finalIcons = await Promise.all(iconsPromises)
- const iconsObj = {}
- finalIcons
- .map(icon => {
- iconsObj[icon.name] = icon.code
- })
- console.log('export JSON successfully!')
- fs.writeFileSync(path.join(__dirname, 'icons.json'), JSON.stringify(iconsObj, null, 2))
-}
-
-module.exports = exportSvgs

bin/processSvg.js

@@ -50,7 +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(svg => svg.replace(/([a-z]+)-([a-z]+)=/g, (_, a, b) => `${a}${CamelCase(b)}=`))
  .then(removeSVGElement)
  return optimized;
 }

bin/utils.js

+const upperCamelCase = require('uppercamelcase')
+
+const parseName = (name, defaultStyle) => {
+ const nameSlices = name.split('-')
+ const style = nameSlices[nameSlices.length - 1]
+ return {
+ name,
+ componentName: upperCamelCase(name),
+ style: style==='fill' || style==='stroke' ? style : defaultStyle
+ }
+}
+
+module.exports = {
+ parseName
+};

src/data.json

+{}
\ No newline at end of file