diff --git a/.github/workflows/push.yml b/.github/workflows/push.yml index 237ea1c2b..433cc0957 100644 --- a/.github/workflows/push.yml +++ b/.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/figma-action@v1.0.0-alpha.2 @@ -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 }} diff --git a/bin/build.js b/bin/build.js index 5e781dc3f..a3a845025 100644 --- a/bin/build.js +++ b/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 diff --git a/bin/export.js b/bin/export.js deleted file mode 100644 index 8747c1147..000000000 --- a/bin/export.js +++ /dev/null @@ -1,85 +0,0 @@ -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: '...' } -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 diff --git a/bin/processSvg.js b/bin/processSvg.js index babab9ef0..44ae5f938 100644 --- a/bin/processSvg.js +++ b/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; } diff --git a/bin/utils.js b/bin/utils.js new file mode 100644 index 000000000..252ff8386 --- /dev/null +++ b/bin/utils.js @@ -0,0 +1,15 @@ +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 +}; diff --git a/src/data.json b/src/data.json index e69de29bb..9e26dfeeb 100644 --- a/src/data.json +++ b/src/data.json @@ -0,0 +1 @@ +{} \ No newline at end of file