Generate icon from figma

Import icon từ figma tự động bằng script §

Đối với đa số dự án, việc sử dụng icon từ figma là rất nhiều nhưng dev đôi khi không để đến việc import, đặt tên, sử dụng lại các icon nên script sau được tạo ra để làm việc đó

1. Cấu hình các thông số trước khi import §

Có 4 thông số sau cần phải cấu hình trước khi chạy import tự động đó chính là: figma token, figma fileId, page trong file figma, cấu hình màu mặc định

1.1. Hướng dẫn cấu hình figma token §

Hướng dẫn từ trang chủ

Ví dụ: figd_PZ23wpma0KBs4GO5ihBE4DlK6V3hyHqJL0pJxFlM

Sau đó tại file package.json tìm đến các giá trị FIGMA_TOKEN và thay bằng giá trị trên, ví dụ:

    "generate-icon": "cross-env FIGMA_TOKEN=figd_PZ23wpma0KBs4GO5ihBE4DlK6V3hyHqJL0pJxFlM figma-export use-config scripts/generate-icon/.figmaexportrc.components.js && eslint --fix ./components/Icon",
    "generate-style": "cross-env FIGMA_TOKEN=figd_PZ23wpma0KBs4GO5ihBE4DlK6V3hyHqJL0pJxFlM figma-export use-config scripts/generate-styles/.figmaexportrc.styles.js",

1.2. Hướng dẫn lấy figmaId §

Ví dụ chúng ta có link sau https://www.figma.com/file/fzYhvQpqwhZDUImRz431Qo/figma-export?type=design&node-id=254-963&mode=design&t=xG8kXgVQYFJtbN3g-0

Thì figmaId ở đây sẽ là: fzYhvQpqwhZDUImRz431Qo

Sau đó tại file .figmaexportrc.components.js tìm đến fileId ta thay giá trị vào, ví dụ:

module.exports = {
  commands: [
    ['components', {
      fileId: 'fzYhvQpqwhZDUImRz431Qo',

1.3.Hướng dẫn lấy page trong file figma §

Trong một file figma chúng ta thường có nhiều page cho các màn hình khác nhau và thường sẽ có một page riêng để định nghĩa các icon Thì ở đây chúng ta sẽ lấy các page cần lấy icon: ['icon']

Sau đó tại file .figmaexportrc.components.js tìm đến onlyFromPages ta thay giá trị vào, ví dụ:

module.exports = {
  commands: [
    ['components', {
      fileId: '0hfW206cgPGjJ3GRHJ9pAP',
      onlyFromPages: ['icons'],

1.4. Hướng dẫn cấu hình màu mặc định §

Đầu tiền khi lấy các file svg về chúng ta phải replace mã màu chủ đạo đang fix cứng trong file sang currentColor

Tại file .figmaexportrc.components.js tìm đến replaceAttrValues ta thay các giá trị màu để replace vào, ví dụ:

{
  "#000": "currentColor"
}

Sau đó ta có thể set mã màu mặc định cho icon qua component IconWrapper tìm đến colorProp và set giá trị mặc định, ví dụ:

export function IconWrapper({
  icon,
  color: colorProp = "#fff",
  size: sizeProp,
  autoSize,
  ...restProps
}: {icon: React.ReactNode} & IconWrapperProps): JSX.Element {
  ...
}

2. Import tự động §

Chạy câu lệnh yarn generate-icon để bắt đầu việc import icon từ figma. Tất cả icon sau khi import xong sẽ xuất hiện ở Icon

Để có thể preview tất cả các icon vừa mới import xong, chạy câu lệnh yarn generate-icon-previewer. Một file mới sẽ ược tạo ra trong folder pages icon-gallery.tsx. Truy cập vào localhost:3000/icon-gallery để xem preview các icon vừa import

Khi sử dụng các icon thì ta sẽ import từ file index chứ không import trực tiếp từng file icon, ví dụ:

import { IssueOpened } from "@components/Icon"