znellaicon 中文文档教程
使用 Figma 的图标自动化工作流程
这是 Figma 图标自动化插件 的存储库。
开发
在根目录下创建一个.env
。将您的 Figma 文件 url 和 Figma 令牌放入其中。
FIGMA_FILE_URL=https://www.figma.com/file/********************/juuust-react-icon
FIGMA_TOKEN=********************************
获取 SVG 文件
运行 yarn fetch
从 Figma 文件中获取 SVG 文件。这会将您的 SVG 拉入 ./src/svg/
中。
为图标生成 React 组件
运行yarngenerate从SVG文件生成组件文件。这会将您的组件文件拉入 ./src/icons/
中。
在本地
开发运行yarn dev
来开发可以看到所有图标的应用程序。
在本地
进行开发运行yarn build
来构建页面。
Icon Automation Workflow Using Figma
It's a repository for Figma Icon Automation Plugin.
Development
Create a .env
in the root directory. Put your Figma file url and Figma token inside.
FIGMA_FILE_URL=https://www.figma.com/file/********************/juuust-react-icon
FIGMA_TOKEN=********************************
fetch SVG file
Run yarn fetch
to fetch SVG files from Figma file. This will pull your SVGs in ./src/svg/
.
generate React components for icons
Run yarn generate
to generate component files from SVG files. This will pull your component files in ./src/icons/
.
Develop in local
Run yarn dev
to develop the application in which you can see all icons.
Develop in local
Run yarn build
to build Pages.
更多
你可能也喜欢
- 409_test_demo_1 中文文档教程
- 48th-sns-sdk 中文文档教程
- @0x/contracts-extensions 中文文档教程
- @12stonechurch/react-native-audio-toolkit 中文文档教程
- @24hr/redirect-matcher 中文文档教程
- @352inc/react-native-aws-cognito-js 中文文档教程
- @3acaga/react-bing-maps 中文文档教程
- @47nordmedia/k2-systems-ui-library 中文文档教程
- @4geit/swg-get-user-with-api-token-helper 中文文档教程
- @4wd/commit-tool 中文文档教程