Commit 7b6a8fdf authored by leadream's avatar leadream

README-CN done

parent 704a87ac
# Figma 图标自动化插件
[English](./README.md)
>第一次配置过程比较繁琐,且需要一定的开发知识,可以邀请开发同学一起完成。
Figma 图标自动化插件是一个可以帮助你将设计文件中的图标组件转换为 React 组件代码,并上传至 NPM 以便开发直接使用命令行安装和更新的插件。设计师可以通过此插件快速交付图标文件,它能省去很多不必要的中间环节,从而达到让设计师轻轻一点就更新,开发一条命令就下载的效果,**整个过程中两人都不用离开座位多说一句话**
本项目灵感来源于 [GitHub Octicon](https://github.com/primer/octicons)[Feather Icon](https://github.com/feathericons/react-feather),感谢这两个很棒的图标库。感兴趣的朋友可以了解一下 [GitHub 怎样使用 Figma API 来交付图标的](https://github.blog/2018-04-12-driving-changes-from-designs/)
## 它是怎样工作的?
![他是怎样工作的](./imgs/flow.jpg)
整个流程比较复杂,但大部分都是自动化的,只需要一次配置,后续使用都非常简单。整个过程大致可以分为六步:
- **创建组件**
首先,设计师应该创建一个 Figma 文件,并在里面来设计所有的图标。需要注意的是,最后要将图标转换为组件,因为整个过程只会转换组件。
- **插件生成 Pull Request**:安装好插件之后,填写自己对应的 GitHub 仓库信息,每次更新之后通过插件来发布版本更新,这会在你的仓库中生成一个 Pull Request,也就是一个合并请求。
- **合并 PR,触发 Actions**:前往 GitHub 页面,将这个 PR 合并至主分支,这会触发仓库内定义好的一连串 [GitHub Actions](https://github.com/features/actions)(GitHub 的自动化流程)。
- **处理转换 SVG 代码**:这一连串 GitHub Actions 会做这么几件事:首先它会通过 Figma API 自动获取组件的 SVG 代码,接着将 SVG 代码中的冗余代码移除,再将其转换为 React 组件格式的代码。
- **发布至 NPM**[NPM](https://www.npmjs.com/) 是一个前端的包管理工具,你可以将你的组件库上传至它的云端存储中,这样开发同学就可以使用熟悉的命令行安装使用或者更新了。上述 Actions 的最后一步就是将生成的图标组件库上传至 NPM。
- **开发安装或更新**:一般前端都会使用 NPM 来管理自己项目中的依赖库,上述步骤完成后他们就可以通过执行命令来安装或者更新图标库了,并在代码中直接引入使用了。
## 如何使用
### 先决条件
- 首先,你需要有一个 [GitHub](https://github.com) 账号。
- 其次,你还需要有一个 [NPM](https://www.npmjs.com) 账号。
如果你还没有的话,只需要去对应的官网注册就可以了,注册过程此处按下不表。
### 使用步骤
#### 1. 创建 Figma 文件
首先你需要创建一个 Figma 文件,在里面存放你的图标组件,你可以从我的[示例文件](https://www.figma.com/file/gTaV6nOPiDx0F3c7WHPME3/juuust-icon)复制,也可以自己创建一个文件,不过图标要转为 master 组件。
![figma-file](./imgs/figma-file.png)
#### 2. 安装插件
还没上线,你可以下载这个仓库并解压,在 Figma 客户端中的插件页面右侧点击 Development 后面的加号,创建一个新插件。然后点击 Link exsiting plugin,选择解压出来的文件中的 manifest.json 文件。
![install-plugin](./imgs/install-plugin.png)
#### 3. fork demo 仓库
现在你需要 fork 我的 demo 仓库,也就是 https://github.com/leadream/juuust-icon ,打开后点击右上角的 fork 就可以把这个仓库复制到自己的账号下。
![fork-repository](./imgs/fork-repository.png)
#### 4. 生成三个 token
我们需要 Figma、GitHub 和 NPM 三个平台的 token。
- **Figma**:打开 Figma 的个人设置页面,创建一个新的 token,复制下来备用(只会显示这一次,一刷新就没了)。
![figma-token](./imgs/figma-token.png)
- **GitHub**:打开 [GitHub token](https://github.com/settings/tokens) 页面,生成一个 token,复制下来备用。
![github-token](./imgs/github-token.png)
- **NPM**:前往 NPM 的个人 token 页面,生成一个 token,复制下来备用。
![npm-token](./imgs/npm-token.png)
#### 5. 填写三个 Secrets
进入 GitHub 的仓库下 Settings -> Secrets 页面中,添加三个 Secret。它们分别是:
- **FIGMA_FILE_URL**:第一步创建的 Figma 文件地址。
- **FIGMA_TOKEN**:上一步创建的 Figma token。
- **NPM_AUTH_TOKEN**:上一步创建的 NPM token。
![repo-secrets](./imgs/repo-secrets.png)
#### 6. 在插件中填写仓库地址和 token
打开 Figma,右键依次选择 Plugins -> Development -> icon-automation,打开插件,此时我们需要填写两个东西。第一个是填写第三步 fork 到你的账号下的仓库地址(是你自己的仓库地址,不要填写我的 demo 的地址)。同时填写第四步中生成的 GitHub token,点击 go 之后插件会进入到发布页面。
![plugin-settings](./imgs/plugin-settings.png)
#### 7. 更改仓库信息
在发布之前,你需要更新一下仓库中 package.json 中的一些信息,首先是 name,改成一个你自己喜欢的名字。name 要求只能使用小写字母、中划线或下划线组合,你还可以按照 @your-name/package-name 的形式命名。其次是 version,把它改成 0.0.0 就可以了。
![update-package-json](./imgs/update-package-json.png)
还有一些比如 description、repository、author 等等都可以改成你自己的信息。
#### 8. 在插件中填写版本号,发布更新
此时我们打开 Figma 客户端,填写一个版本号,并填写自己的修改信息,然后点击 push to GitHub,等待完成。
![plugin-publish](./imgs/plugin-publish.png)
发布成功,这一步会在你的仓库中创建一个 PR,点击成功提示中的链接就可以打开这个 PR 页面。
![plugin-published-successfully](./imgs/plugin-published-successfully.png)
#### 9. 合并 PR,等待 Actions 执行完毕
在 PR 页面,我们点击合并按钮,将这个 PR 合并至主仓库。
![merge-pr](./imgs/merge-pr.png)
这个操作会触发 GitHub Actions,进入 Actions 页面可以看到正在逐步执行定义好的流程。
![waiting-workflow](./imgs/waiting-workflow.png)
点击进去可以看到具体每一步执行的情况。
![workflow-steps](./imgs/workflow-steps.png)
#### 10. 执行完毕,开发在命令行安装、更新
等 GitHub Actions 的每一步都完成之后,开发就可以在终端执行 `npm add YOUR_PACKAGE_NAME` 来安装这个组件库了,如果已经安装,只需要执行 `npm update YOUR_PACKAGE_NAME` 来更新就可以了。
如果使用的是 yarn,则需要执行 `yarn add YOUR_PACKAGE_NAME` 来安装或执行 `yarn upgrade YOUR_PACKAGE_NAME` 来更新。
![yarn-add](./imgs/yarn-add.png)
接着,他就可以在 React 项目代码中引入组件库并使用了。
![use-in-code](./imgs/use-in-code.png)
## 注意事项
- 图标一般有描边(stroke)和填充(fill)两种样式,一个图标只能采用一种形式,不可以混合。想要转为 fill 样式,你可以使用 Outline Stroke 将图标转换为填充形状。
- 图标命名请使用英文(不可以含 `/`),因为这些命名最终会变为代码中的命名。同时,你可以通过给命名添加 `-fill``-stroke` 后缀来区别它们的样式,GitHub Actions 会根据这个后缀生成对应的代码。
- 请记得更改 package.json 中的 name 和 version。
- **很多过程需要开发知识,可以邀请开发同学协助完成。**
# Figma Icon Automation Plugin
Figma Icon Automation is a plugin that helps you synchronize your icons' SVG code to a Github Repository, Then the Github Action will convert them to React code and update to NPM automatically.
\ No newline at end of file
[中文说明](./README-CN.md)
Figma Icon Automation is a plugin that helps you synchronize your icons' SVG code to a Github Repository, Then the Github Action will convert them to React code and update to NPM automatically.
## How it works?
## Usage
### Pre-requirements
### Steps
## Attentions
\ No newline at end of file
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId]) {
/******/ return installedModules[moduleId].exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ i: moduleId,
/******/ l: false,
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/ module.l = true;
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/
/******/ // define getter function for harmony exports
/******/ __webpack_require__.d = function(exports, name, getter) {
/******/ if(!__webpack_require__.o(exports, name)) {
/******/ Object.defineProperty(exports, name, { enumerable: true, get: getter });
/******/ }
/******/ };
/******/
/******/ // define __esModule on exports
/******/ __webpack_require__.r = function(exports) {
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ }
/******/ Object.defineProperty(exports, '__esModule', { value: true });
/******/ };
/******/
/******/ // create a fake namespace object
/******/ // mode & 1: value is a module id, require it
/******/ // mode & 2: merge all properties of value into the ns
/******/ // mode & 4: return value when already ns object
/******/ // mode & 8|1: behave like require
/******/ __webpack_require__.t = function(value, mode) {
/******/ if(mode & 1) value = __webpack_require__(value);
/******/ if(mode & 8) return value;
/******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
/******/ var ns = Object.create(null);
/******/ __webpack_require__.r(ns);
/******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value });
/******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
/******/ return ns;
/******/ };
/******/
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = function(module) {
/******/ var getter = module && module.__esModule ?
/******/ function getDefault() { return module['default']; } :
/******/ function getModuleExports() { return module; };
/******/ __webpack_require__.d(getter, 'a', getter);
/******/ return getter;
/******/ };
/******/
/******/ // Object.prototype.hasOwnProperty.call
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = "./src/code.ts");
/******/ })
/************************************************************************/
/******/ ({
/***/ "./src/code.ts":
/*!*********************!*\
!*** ./src/code.ts ***!
\*********************/
/*! no static exports found */
/***/ (function(module, exports) {
figma.showUI(__html__, { width: 320, height: 320 });
// get github settings
function getGithubSettings() {
return figma.clientStorage.getAsync('githubData');
}
// set github settings
function setGithubSettings(data) {
figma.clientStorage.setAsync('githubData', data);
}
// send github data to UI
function init() {
getGithubSettings()
.then(githubData => {
figma.ui.postMessage({ type: 'githubDataGot', githubData });
});
}
figma.ui.onmessage = msg => {
switch (msg.type) {
case 'setGithubData':
setGithubSettings(msg.githubData);
break;
case 'cancel':
figma.closePlugin();
break;
}
};
init();
/***/ })
/******/ });
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly8vd2VicGFjay9ib290c3RyYXAiLCJ3ZWJwYWNrOi8vLy4vc3JjL2NvZGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtRQUFBO1FBQ0E7O1FBRUE7UUFDQTs7UUFFQTtRQUNBO1FBQ0E7UUFDQTtRQUNBO1FBQ0E7UUFDQTtRQUNBO1FBQ0E7UUFDQTs7UUFFQTtRQUNBOztRQUVBO1FBQ0E7O1FBRUE7UUFDQTtRQUNBOzs7UUFHQTtRQUNBOztRQUVBO1FBQ0E7O1FBRUE7UUFDQTtRQUNBO1FBQ0EsMENBQTBDLGdDQUFnQztRQUMxRTtRQUNBOztRQUVBO1FBQ0E7UUFDQTtRQUNBLHdEQUF3RCxrQkFBa0I7UUFDMUU7UUFDQSxpREFBaUQsY0FBYztRQUMvRDs7UUFFQTtRQUNBO1FBQ0E7UUFDQTtRQUNBO1FBQ0E7UUFDQTtRQUNBO1FBQ0E7UUFDQTtRQUNBO1FBQ0EseUNBQXlDLGlDQUFpQztRQUMxRSxnSEFBZ0gsbUJBQW1CLEVBQUU7UUFDckk7UUFDQTs7UUFFQTtRQUNBO1FBQ0E7UUFDQSwyQkFBMkIsMEJBQTBCLEVBQUU7UUFDdkQsaUNBQWlDLGVBQWU7UUFDaEQ7UUFDQTtRQUNBOztRQUVBO1FBQ0Esc0RBQXNELCtEQUErRDs7UUFFckg7UUFDQTs7O1FBR0E7UUFDQTs7Ozs7Ozs7Ozs7O0FDbEZBLHdCQUF3QiwwQkFBMEI7QUFDbEQ7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0EsOEJBQThCLG9DQUFvQztBQUNsRSxLQUFLO0FBQ0w7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBIiwiZmlsZSI6ImNvZGUuanMiLCJzb3VyY2VzQ29udGVudCI6WyIgXHQvLyBUaGUgbW9kdWxlIGNhY2hlXG4gXHR2YXIgaW5zdGFsbGVkTW9kdWxlcyA9IHt9O1xuXG4gXHQvLyBUaGUgcmVxdWlyZSBmdW5jdGlvblxuIFx0ZnVuY3Rpb24gX193ZWJwYWNrX3JlcXVpcmVfXyhtb2R1bGVJZCkge1xuXG4gXHRcdC8vIENoZWNrIGlmIG1vZHVsZSBpcyBpbiBjYWNoZVxuIFx0XHRpZihpbnN0YWxsZWRNb2R1bGVzW21vZHVsZUlkXSkge1xuIFx0XHRcdHJldHVybiBpbnN0YWxsZWRNb2R1bGVzW21vZHVsZUlkXS5leHBvcnRzO1xuIFx0XHR9XG4gXHRcdC8vIENyZWF0ZSBhIG5ldyBtb2R1bGUgKGFuZCBwdXQgaXQgaW50byB0aGUgY2FjaGUpXG4gXHRcdHZhciBtb2R1bGUgPSBpbnN0YWxsZWRNb2R1bGVzW21vZHVsZUlkXSA9IHtcbiBcdFx0XHRpOiBtb2R1bGVJZCxcbiBcdFx0XHRsOiBmYWxzZSxcbiBcdFx0XHRleHBvcnRzOiB7fVxuIFx0XHR9O1xuXG4gXHRcdC8vIEV4ZWN1dGUgdGhlIG1vZHVsZSBmdW5jdGlvblxuIFx0XHRtb2R1bGVzW21vZHVsZUlkXS5jYWxsKG1vZHVsZS5leHBvcnRzLCBtb2R1bGUsIG1vZHVsZS5leHBvcnRzLCBfX3dlYnBhY2tfcmVxdWlyZV9fKTtcblxuIFx0XHQvLyBGbGFnIHRoZSBtb2R1bGUgYXMgbG9hZGVkXG4gXHRcdG1vZHVsZS5sID0gdHJ1ZTtcblxuIFx0XHQvLyBSZXR1cm4gdGhlIGV4cG9ydHMgb2YgdGhlIG1vZHVsZVxuIFx0XHRyZXR1cm4gbW9kdWxlLmV4cG9ydHM7XG4gXHR9XG5cblxuIFx0Ly8gZXhwb3NlIHRoZSBtb2R1bGVzIG9iamVjdCAoX193ZWJwYWNrX21vZHVsZXNfXylcbiBcdF9fd2VicGFja19yZXF1aXJlX18ubSA9IG1vZHVsZXM7XG5cbiBcdC8vIGV4cG9zZSB0aGUgbW9kdWxlIGNhY2hlXG4gXHRfX3dlYnBhY2tfcmVxdWlyZV9fLmMgPSBpbnN0YWxsZWRNb2R1bGVzO1xuXG4gXHQvLyBkZWZpbmUgZ2V0dGVyIGZ1bmN0aW9uIGZvciBoYXJtb255IGV4cG9ydHNcbiBcdF9fd2VicGFja19yZXF1aXJlX18uZCA9IGZ1bmN0aW9uKGV4cG9ydHMsIG5hbWUsIGdldHRlcikge1xuIFx0XHRpZighX193ZWJwYWNrX3JlcXVpcmVfXy5vKGV4cG9ydHMsIG5hbWUpKSB7XG4gXHRcdFx0T2JqZWN0LmRlZmluZVByb3BlcnR5KGV4cG9ydHMsIG5hbWUsIHsgZW51bWVyYWJsZTogdHJ1ZSwgZ2V0OiBnZXR0ZXIgfSk7XG4gXHRcdH1cbiBcdH07XG5cbiBcdC8vIGRlZmluZSBfX2VzTW9kdWxlIG9uIGV4cG9ydHNcbiBcdF9fd2VicGFja19yZXF1aXJlX18uciA9IGZ1bmN0aW9uKGV4cG9ydHMpIHtcbiBcdFx0aWYodHlwZW9mIFN5bWJvbCAhPT0gJ3VuZGVmaW5lZCcgJiYgU3ltYm9sLnRvU3RyaW5nVGFnKSB7XG4gXHRcdFx0T2JqZWN0LmRlZmluZVByb3BlcnR5KGV4cG9ydHMsIFN5bWJvbC50b1N0cmluZ1RhZywgeyB2YWx1ZTogJ01vZHVsZScgfSk7XG4gXHRcdH1cbiBcdFx0T2JqZWN0LmRlZmluZVByb3BlcnR5KGV4cG9ydHMsICdfX2VzTW9kdWxlJywgeyB2YWx1ZTogdHJ1ZSB9KTtcbiBcdH07XG5cbiBcdC8vIGNyZWF0ZSBhIGZha2UgbmFtZXNwYWNlIG9iamVjdFxuIFx0Ly8gbW9kZSAmIDE6IHZhbHVlIGlzIGEgbW9kdWxlIGlkLCByZXF1aXJlIGl0XG4gXHQvLyBtb2RlICYgMjogbWVyZ2UgYWxsIHByb3BlcnRpZXMgb2YgdmFsdWUgaW50byB0aGUgbnNcbiBcdC8vIG1vZGUgJiA0OiByZXR1cm4gdmFsdWUgd2hlbiBhbHJlYWR5IG5zIG9iamVjdFxuIFx0Ly8gbW9kZSAmIDh8MTogYmVoYXZlIGxpa2UgcmVxdWlyZVxuIFx0X193ZWJwYWNrX3JlcXVpcmVfXy50ID0gZnVuY3Rpb24odmFsdWUsIG1vZGUpIHtcbiBcdFx0aWYobW9kZSAmIDEpIHZhbHVlID0gX193ZWJwYWNrX3JlcXVpcmVfXyh2YWx1ZSk7XG4gXHRcdGlmKG1vZGUgJiA4KSByZXR1cm4gdmFsdWU7XG4gXHRcdGlmKChtb2RlICYgNCkgJiYgdHlwZW9mIHZhbHVlID09PSAnb2JqZWN0JyAmJiB2YWx1ZSAmJiB2YWx1ZS5fX2VzTW9kdWxlKSByZXR1cm4gdmFsdWU7XG4gXHRcdHZhciBucyA9IE9iamVjdC5jcmVhdGUobnVsbCk7XG4gXHRcdF9fd2VicGFja19yZXF1aXJlX18ucihucyk7XG4gXHRcdE9iamVjdC5kZWZpbmVQcm9wZXJ0eShucywgJ2RlZmF1bHQnLCB7IGVudW1lcmFibGU6IHRydWUsIHZhbHVlOiB2YWx1ZSB9KTtcbiBcdFx0aWYobW9kZSAmIDIgJiYgdHlwZW9mIHZhbHVlICE9ICdzdHJpbmcnKSBmb3IodmFyIGtleSBpbiB2YWx1ZSkgX193ZWJwYWNrX3JlcXVpcmVfXy5kKG5zLCBrZXksIGZ1bmN0aW9uKGtleSkgeyByZXR1cm4gdmFsdWVba2V5XTsgfS5iaW5kKG51bGwsIGtleSkpO1xuIFx0XHRyZXR1cm4gbnM7XG4gXHR9O1xuXG4gXHQvLyBnZXREZWZhdWx0RXhwb3J0IGZ1bmN0aW9uIGZvciBjb21wYXRpYmlsaXR5IHdpdGggbm9uLWhhcm1vbnkgbW9kdWxlc1xuIFx0X193ZWJwYWNrX3JlcXVpcmVfXy5uID0gZnVuY3Rpb24obW9kdWxlKSB7XG4gXHRcdHZhciBnZXR0ZXIgPSBtb2R1bGUgJiYgbW9kdWxlLl9fZXNNb2R1bGUgP1xuIFx0XHRcdGZ1bmN0aW9uIGdldERlZmF1bHQoKSB7IHJldHVybiBtb2R1bGVbJ2RlZmF1bHQnXTsgfSA6XG4gXHRcdFx0ZnVuY3Rpb24gZ2V0TW9kdWxlRXhwb3J0cygpIHsgcmV0dXJuIG1vZHVsZTsgfTtcbiBcdFx0X193ZWJwYWNrX3JlcXVpcmVfXy5kKGdldHRlciwgJ2EnLCBnZXR0ZXIpO1xuIFx0XHRyZXR1cm4gZ2V0dGVyO1xuIFx0fTtcblxuIFx0Ly8gT2JqZWN0LnByb3RvdHlwZS5oYXNPd25Qcm9wZXJ0eS5jYWxsXG4gXHRfX3dlYnBhY2tfcmVxdWlyZV9fLm8gPSBmdW5jdGlvbihvYmplY3QsIHByb3BlcnR5KSB7IHJldHVybiBPYmplY3QucHJvdG90eXBlLmhhc093blByb3BlcnR5LmNhbGwob2JqZWN0LCBwcm9wZXJ0eSk7IH07XG5cbiBcdC8vIF9fd2VicGFja19wdWJsaWNfcGF0aF9fXG4gXHRfX3dlYnBhY2tfcmVxdWlyZV9fLnAgPSBcIlwiO1xuXG5cbiBcdC8vIExvYWQgZW50cnkgbW9kdWxlIGFuZCByZXR1cm4gZXhwb3J0c1xuIFx0cmV0dXJuIF9fd2VicGFja19yZXF1aXJlX18oX193ZWJwYWNrX3JlcXVpcmVfXy5zID0gXCIuL3NyYy9jb2RlLnRzXCIpO1xuIiwiZmlnbWEuc2hvd1VJKF9faHRtbF9fLCB7IHdpZHRoOiAzMjAsIGhlaWdodDogMzIwIH0pO1xuLy8gZ2V0IGdpdGh1YiBzZXR0aW5nc1xuZnVuY3Rpb24gZ2V0R2l0aHViU2V0dGluZ3MoKSB7XG4gICAgcmV0dXJuIGZpZ21hLmNsaWVudFN0b3JhZ2UuZ2V0QXN5bmMoJ2dpdGh1YkRhdGEnKTtcbn1cbi8vIHNldCBnaXRodWIgc2V0dGluZ3NcbmZ1bmN0aW9uIHNldEdpdGh1YlNldHRpbmdzKGRhdGEpIHtcbiAgICBmaWdtYS5jbGllbnRTdG9yYWdlLnNldEFzeW5jKCdnaXRodWJEYXRhJywgZGF0YSk7XG59XG4vLyBzZW5kIGdpdGh1YiBkYXRhIHRvIFVJXG5mdW5jdGlvbiBpbml0KCkge1xuICAgIGdldEdpdGh1YlNldHRpbmdzKClcbiAgICAgICAgLnRoZW4oZ2l0aHViRGF0YSA9PiB7XG4gICAgICAgIGZpZ21hLnVpLnBvc3RNZXNzYWdlKHsgdHlwZTogJ2dpdGh1YkRhdGFHb3QnLCBnaXRodWJEYXRhIH0pO1xuICAgIH0pO1xufVxuZmlnbWEudWkub25tZXNzYWdlID0gbXNnID0+IHtcbiAgICBzd2l0Y2ggKG1zZy50eXBlKSB7XG4gICAgICAgIGNhc2UgJ3NldEdpdGh1YkRhdGEnOlxuICAgICAgICAgICAgc2V0R2l0aHViU2V0dGluZ3MobXNnLmdpdGh1YkRhdGEpO1xuICAgICAgICAgICAgYnJlYWs7XG4gICAgICAgIGNhc2UgJ2NhbmNlbCc6XG4gICAgICAgICAgICBmaWdtYS5jbG9zZVBsdWdpbigpO1xuICAgICAgICAgICAgYnJlYWs7XG4gICAgfVxufTtcbmluaXQoKTtcbiJdLCJzb3VyY2VSb290IjoiIn0=
\ No newline at end of file
!function(e){var t={};function n(r){if(t[r])return t[r].exports;var i=t[r]={i:r,l:!1,exports:{}};return e[r].call(i.exports,i,i.exports,n),i.l=!0,i.exports}n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var i in e)n.d(r,i,function(t){return e[t]}.bind(null,i));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=22)}({22:function(e,t){figma.showUI(__html__,{width:320,height:320}),figma.ui.onmessage=e=>{switch(e.type){case"setGithubData":!function(e){figma.clientStorage.setAsync("githubData",e)}(e.githubData);break;case"cancel":figma.closePlugin()}},figma.clientStorage.getAsync("githubData").then(e=>{figma.ui.postMessage({type:"githubDataGot",githubData:e})})}});
\ No newline at end of file
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
......@@ -2,7 +2,6 @@
"name": "icon-automation",
"version": "1.0.0",
"description": "A figma plugin to push icon svg code to Github automatically.",
"main": "index.js",
"author": "Jun",
"license": "MIT",
"scripts": {
......
......@@ -87,7 +87,7 @@ export default class Settings extends React.Component<Props> {
<button className='button button--primary button-block' onClick={this.handleSubmit}>Go</button>
</div>
<div className="setting-footer form-item type type--pos-medium-normal">
developed by <a href="https://github.com/leadream" target="_blank">Jun</a>
developed by <a href="https://github.com/leadream" target="_blank">Leadream</a>
</div>
</div>
)
......
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