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