Lsicon Icon Manage and Release

---

Lsicon / Icon Manage and Release is a Figma plugin designed for designers to streamline the icon management process. It allows you to publish and update icons without relying on other platforms:

• Export SVGs from Figma → GitHub
• Convert to React components
• Publish to npm
• Integrate seamlessly into projects
• Preview your NPM resources via lsicon.com

Developers can easily use these icon components in their projects, with the entire process being highly efficient and requiring minimal manual intervention.

How It Works

Although the process may seem complex, most operations are automated by the plugin. You only need to perform light configuration without delving into technical details.

Prerequisites

Before using the plugin, ensure you have completed the following preparations:

1. GitHub Account - If you don't have a GitHub account, please sign up.
2. NPM Account - If you don't have an npm account, please sign up.

Configuration Tutorial

If you are using the plugin for the first time, it is recommended to read the tutorial to familiarize yourself with the process. If you are already familiar, you can skip to the relevant section.

• Figma playground file: Figma Link
• Video Tutorial: Youtube Link

1. Create a GitHub Repository

You need to create a repository on GitHub to host the icon resources.

• Create New - Link

2. Create a GitHub Personal Access Token

When using the plugin, operations such as submitting, creating PRs, and merging PRs require appropriate permissions. You need to create a dedicated GitHub Personal Access Token.

• Personal access tokens - Link
• Enable necessary permissions:
  • Action: Read and write
  • Contents: Read and write
  • Metadata: Read-only
  • Pull requests: Read and write
  • Workflows: Read and write

3. Create an NPM Token

Since the icons will eventually be published to NPM, you need to obtain and save an NPM token.

• NPM - Link https://www.npmjs.com/settings/ yourname /tokens/granular-access-tokens/new

4. Create an Actions Secret Token

To ensure account security, we use GitHub repository secrets to manage the npm token, which is a secure management method. For details, refer to the video below:

Important

Be sure to use the name NPM_TOKEN and do not modify it.

• Create actions secret - Link（https://github.com/ yourname / your-repository /settings/secrets/actions/new）

5. Manage Icons in Figma

You can refer to our Lsicon Figma Icon Library structure to design your Figma file. Alternatively, you can open the plugin in Figma and select the Playground file to view an example.

Please ensure that your Figma file meets the following requirements; otherwise, resource synchronization may fail.

• Icons must use Create component set, and the variant name must be named style.
• If you have multiple styles, add multiple types under the current component's style, e.g., (style=outline, style=filled, style=colorful...).
• If you have multiple categories, place the icons inside a Frame, and the Frame name will be displayed as the category name.

6. Use the Plugin in Figma

🎉 Congratulations, you have completed all configurations. Now, open the Lsicon / Icon Manage and Release plugin in Figma to start using it.

1. GitHub Repository URL: The repository address where the icons will be stored, typically https://github.com/ name/ your-repository.
2. GitHub Personal Access Token: Enter the Personal Access Token created in the second step.
3. NPM Package Name: Enter your NPM package name or a new package name you wish to create.
4. What Kind of Version: Choose the version you want to publish, referring to Semantic Versioning (SemVer).