dfelinto/penpot-icon-generator-plugin
0
0
Fork 0
Code Issues Pull Requests Actions Projects Releases Wiki Activity
Penpot Plugin to generate Icons for Blender mockups
17 Commits 1 Branch 1 Tag 77 KiB
TypeScript 87%
HTML 8.6%
CSS 4.4%
main
Go to file
Dalai Felinto 31a7bc76d4 new API: getTheme -> theme
2024-10-01 18:41:24 +02:00
public Update manifest 2024-09-05 11:42:03 +02:00
src new API: getTheme -> theme 2024-10-01 18:41:24 +02:00
.gitignore Initial commit from: penpot-plugin-starter-template 2024-09-03 15:18:12 +02:00
index.html Remove Flex operator 2024-09-03 17:09:19 +02:00
LICENSE Initial commit from: penpot-plugin-starter-template 2024-09-03 15:18:12 +02:00
package-lock.json Initial commit from: penpot-plugin-starter-template 2024-09-03 15:18:12 +02:00
package.json Initial commit from: penpot-plugin-starter-template 2024-09-03 15:18:12 +02:00
README.md Update README 2024-09-03 15:22:03 +02:00
tsconfig.json Initial commit from: penpot-plugin-starter-template 2024-09-03 15:18:12 +02:00
vite.config.ts Initial commit from: penpot-plugin-starter-template 2024-09-03 15:18:12 +02:00

README.md

Blender Icons Plugin

This works in combination with: https://projects.blender.org/dfelinto/penpot-icon-generator

You need to run the icon generator, and then paste the content of the clipboard (a SVG) inside Penpot.

And then you run this plugin.

Install Dependencies

After cloning the repository, navigate into the project directory and install the necessary dependencies by running:

cd penpot-plugin
npm install

This command installs all the required packages listed in the package.json file.

Configure the Plugin

Next, you need to edit the plugin's configuration file:

  1. Navigate to the penpot-plugin directory.
  2. Open the manifest.json file located in the /public folder.
  3. Make any necessary changes to the configuration. Note that any modifications to this file require you to restart the development server for changes to take effect.

Run the Development Server

To start the development server, run the following command in your terminal:

npm run dev

Once the server is running, open your web browser and go to http://localhost:4400 to view your plugin in action. Now it is ready to be loaded in Penpot with the url http://localhost:4400/manifest.json.

Development

Technologies Used

This plugin template uses several key technologies:

  • TypeScript
  • Vite
  • Web Components

Libraries Included

The template includes two Penpot libraries to assist in your development:

  • @penpot/plugin-styles: This library provides utility functions and resources to help you style your components consistently with Penpot's design system.
  • @penpot/plugin-types: This library includes types and API descriptions for interacting with the Penpot plugin API, facilitating the development of plugins that can communicate effectively with the Penpot app.

Build Your Plugin

When you're ready to build your plugin for production, run the following command:

npm run build

This command compiles your TypeScript code and assets into JavaScript, creating a dist folder that contains all the files necessary to deploy your plugin.