diff --git a/.github/scripts/docs-after-clone.sh b/.github/scripts/docs-after-clone.sh
new file mode 100644
index 000000000..f4c590b3f
--- /dev/null
+++ b/.github/scripts/docs-after-clone.sh
@@ -0,0 +1,16 @@
+#! /usr/bin/env bash
+set -e
+
+[[ -z "$1" ]] && echo "Missing working directory argument" && exit 1
+
+echo "Installing root npm"
+npm --prefix $1 install
+
+echo "Running root build"
+npm run --prefix $1 build
+
+echo "Building figma"
+npm run --prefix $1 start
+
+echo "Copying icons"
+cp -R "$1/icons" "$1/docs/public"
diff --git a/.github/scripts/docs.yml b/.github/scripts/docs.yml
new file mode 100644
index 000000000..75509dc97
--- /dev/null
+++ b/.github/scripts/docs.yml
@@ -0,0 +1,4 @@
+build-end:
+ copy-additional-assets:
+ - public/icons/regular
+ - public/icons/solid
\ No newline at end of file
diff --git a/.github/workflows/deploy-developer-portal.yml b/.github/workflows/deploy-developer-portal.yml
new file mode 100644
index 000000000..e9e91155b
--- /dev/null
+++ b/.github/workflows/deploy-developer-portal.yml
@@ -0,0 +1,26 @@
+# This workflow is triggered whenever the main branch is updated
+name: Deploy to DevHub
+
+# on:
+# push:
+# branches:
+# - main
+
+on: workflow_dispatch
+
+jobs:
+ trigger-deployment:
+ name: Trigger deployment
+ runs-on: ubuntu-latest
+ steps:
+
+ - uses: octokit/request-action@v2.x
+ name: Trigger deployment
+ with:
+ route: POST /repos/{owner}/{repo}/actions/workflows/{workflow_id}/dispatches
+ owner: shopware
+ repo: developer-portal
+ ref: main
+ workflow_id: checkout-test-build-deploy.yml
+ env:
+ GITHUB_TOKEN: ${{ secrets.DEV_HUB_PERSONAL_ACCESS_TOKEN }}
\ No newline at end of file
diff --git a/.github/workflows/developer-portal-healthckeck.yml b/.github/workflows/developer-portal-healthckeck.yml
new file mode 100644
index 000000000..eb24a97ad
--- /dev/null
+++ b/.github/workflows/developer-portal-healthckeck.yml
@@ -0,0 +1,19 @@
+name: Healthcheck
+
+on:
+ pull_request:
+ branches:
+ - main
+
+jobs:
+
+ create-healthcheck:
+ uses: shopware/developer-portal/.github/workflows/healthcheck.yml@main
+ with:
+ owner: ${{ github.repository_owner }}
+ repo: ${{ github.event.repository.name }}
+ branch: ${{ github.event.pull_request.head.ref }}
+ sha: ${{ github.event.pull_request.head.sha }}
+ secrets:
+ GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+ PERSONAL_TOKEN: ${{ secrets.DEV_HUB_PERSONAL_ACCESS_TOKEN }}
diff --git a/.github/workflows/docs.yml b/.github/workflows/docs.yml
new file mode 100644
index 000000000..5894b3113
--- /dev/null
+++ b/.github/workflows/docs.yml
@@ -0,0 +1,18 @@
+name: Docs
+
+on: push
+
+jobs:
+ create_docs:
+ runs-on: ubuntu-latest
+ steps:
+ - name: Checkout the repository
+ uses: actions/checkout@v4
+
+ - name: Deploy redirect
+ if: github.ref == 'refs/heads/main'
+ uses: JamesIves/github-pages-deploy-action@4.1.4
+ with:
+ branch: gh-pages
+ folder: redirect
+ clean: true
diff --git a/.github/workflows/npm-publish.yml b/.github/workflows/npm-publish.yml
index b7cc40eac..787335598 100644
--- a/.github/workflows/npm-publish.yml
+++ b/.github/workflows/npm-publish.yml
@@ -7,7 +7,6 @@ on:
jobs:
publish:
- if: github.ref == 'refs/heads/main'
runs-on: ubuntu-latest
steps:
- name: Checkout
@@ -31,3 +30,26 @@ jobs:
with:
token: ${{ secrets.NPM_TOKEN }}
access: 'public'
+
+ publish-tokens:
+ runs-on: ubuntu-latest
+ steps:
+ - name: Checkout
+ uses: actions/checkout@v4
+
+ - uses: pnpm/action-setup@v2
+ with:
+ version: 8
+
+ - name: Setup Node.js
+ uses: actions/setup-node@v4
+ with:
+ node-version: '20'
+
+ - name: lint
+ run: pnpm run lint:all --filter @shopware-ag/meteor-icon-kit
+
+ - uses: JS-DevTools/npm-publish@v1
+ with:
+ token: ${{ secrets.NPM_TOKEN }}
+ access: "public"
diff --git a/.github/workflows/tests.yml b/.github/workflows/tests.yml
index 8f8c8f1b8..b69e35290 100644
--- a/.github/workflows/tests.yml
+++ b/.github/workflows/tests.yml
@@ -15,7 +15,7 @@ jobs:
runs-on: ubuntu-latest
env:
TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
- TURBO_TEAM: ${{ vars.TURBO_TEAM }}
+ TURBO_TEAM: ${{ secrets.TURBO_TEAM }}
steps:
- name: Checkout
uses: actions/checkout@v4
@@ -46,7 +46,7 @@ jobs:
runs-on: ubuntu-latest
env:
TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
- TURBO_TEAM: ${{ vars.TURBO_TEAM }}
+ TURBO_TEAM: ${{ secrets.TURBO_TEAM }}
steps:
- name: Checkout
uses: actions/checkout@v4
diff --git a/.github/workflows/update-healthcheck.yml b/.github/workflows/update-healthcheck.yml
new file mode 100644
index 000000000..ee2e75d6c
--- /dev/null
+++ b/.github/workflows/update-healthcheck.yml
@@ -0,0 +1,38 @@
+# This workflow is triggered from developer-portal
+name: Update healthcheck
+
+on:
+ workflow_dispatch:
+ inputs:
+ owner:
+ description: "Owner to checkout"
+ required: true
+ type: string
+ repo:
+ description: "Repo to checkout"
+ required: true
+ type: string
+ check:
+ description: "Check ID"
+ required: true
+ type: string
+ conclusion:
+ description: "Healthcheck conclusion"
+ required: true
+ type: string
+ run_id:
+ description: "Workflow run ID"
+ required: true
+ type: string
+
+jobs:
+ update-healthcheck:
+ uses: shopware/developer-portal/.github/workflows/update-healthcheck.yml@main
+ with:
+ owner: ${{ inputs.owner }}
+ repo: ${{ inputs.repo }}
+ check: ${{ inputs.check }}
+ conclusion: ${{ inputs.conclusion }}
+ run_id: ${{ inputs.run_id }}
+ secrets:
+ TOKEN: ${{ secrets.GITHUB_TOKEN }}
diff --git a/.github/workflows/update-icons.yml b/.github/workflows/update-icons.yml
new file mode 100644
index 000000000..0634f3c63
--- /dev/null
+++ b/.github/workflows/update-icons.yml
@@ -0,0 +1,46 @@
+name: Update icons
+
+# Manual trigger
+on: workflow_dispatch
+
+env:
+ FIGMA_TOKEN: ${{ secrets.FIGMA_TOKEN }}
+ FIGMA_FILE: ${{ secrets.FIGMA_FILE }}
+
+jobs:
+ update:
+ name: Update icons
+ runs-on: ubuntu-latest
+ steps:
+ - name: Checkout
+ uses: actions/checkout@v4
+
+ - uses: pnpm/action-setup@v2
+ with:
+ version: 8
+
+ - name: Setup Node.js
+ uses: actions/setup-node@v4
+ with:
+ node-version: '20'
+
+ - name: Install dependencies
+ run: pnpm install
+
+ - name: Build
+ run: pnpm --prefix ./packages/icon-kit run build
+
+ - name: Update icons
+ run: pnpm --prefix ./packages/icon-kit run start
+
+ - name: Create Pull Request
+ uses: peter-evans/create-pull-request@v4
+ with:
+ commit-message: Update icons
+ comitter: ${{ secrets.COMITTER }}
+ author: Dennis Mader <${{ secrets.COMITTER }}>
+ branch: update-icons
+ delete-branch: true
+ branch-suffix: timestamp
+ title: Update icons
+ assignees: Weltraumakustik
diff --git a/.github/workflows/visual-tests.yml b/.github/workflows/visual-tests.yml
index b8c828f92..4c77bf535 100644
--- a/.github/workflows/visual-tests.yml
+++ b/.github/workflows/visual-tests.yml
@@ -14,7 +14,7 @@ jobs:
runs-on: ubuntu-latest
env:
TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
- TURBO_TEAM: ${{ vars.TURBO_TEAM }}
+ TURBO_TEAM: ${{ secrets.TURBO_TEAM }}
steps:
- name: Checkout
uses: actions/checkout@v4
diff --git a/packages/icon-kit/.eslintignore b/packages/icon-kit/.eslintignore
new file mode 100644
index 000000000..f06235c46
--- /dev/null
+++ b/packages/icon-kit/.eslintignore
@@ -0,0 +1,2 @@
+node_modules
+dist
diff --git a/packages/icon-kit/.eslintrc.js b/packages/icon-kit/.eslintrc.js
new file mode 100644
index 000000000..a08228037
--- /dev/null
+++ b/packages/icon-kit/.eslintrc.js
@@ -0,0 +1,71 @@
+module.exports = {
+ root: true,
+ parser: '@typescript-eslint/parser',
+ parserOptions: {
+ tsconfigRootDir: __dirname,
+ project: ['./tsconfig.json'],
+ },
+ plugins: [
+ '@typescript-eslint',
+ 'import',
+ ],
+ extends: [
+ 'eslint:recommended',
+ 'plugin:@typescript-eslint/recommended',
+ 'plugin:@typescript-eslint/recommended-requiring-type-checking',
+ ],
+ rules: {
+ 'no-prototype-builtins': 'off',
+ 'comma-dangle': 'off',
+ 'no-irregular-whitespace': 'error',
+ 'no-multiple-empty-lines': ['error', { max: 1}],
+ '@typescript-eslint/comma-dangle': ['error', 'always-multiline'],
+ '@typescript-eslint/explicit-function-return-type': ['error'],
+ '@typescript-eslint/consistent-type-imports': ['error'],
+ '@typescript-eslint/member-delimiter-style': ['error', {
+ multiline: {
+ delimiter: 'comma',
+ requireLast: true,
+ },
+ singleline: {
+ delimiter: 'comma',
+ requireLast: false,
+ },
+ }],
+ 'capitalized-comments': [
+ 'error',
+ 'always',
+ {
+ 'ignorePattern': 'pragma|ignored',
+ 'ignoreInlineComments': true,
+ },
+ ],
+ semi: [
+ 'error',
+ 'always',
+ ],
+ 'indent': [
+ 'error',
+ 2,
+ ],
+ 'no-debugger': 'error',
+ 'no-unreachable': 'error',
+ 'consistent-return': 'error',
+ camelcase: 'error',
+ curly: 'error',
+ eqeqeq: 'error',
+ 'multiline-comment-style': [
+ 'error',
+ 'starred-block',
+ ],
+ 'no-iterator': 'error',
+ 'import/no-cycle': [
+ 2,
+ {
+ maxDepth: 1,
+ },
+ ],
+ quotes: ['error', 'single'],
+ 'eol-last': ['error', 'always'],
+ },
+};
diff --git a/packages/icon-kit/.gitignore b/packages/icon-kit/.gitignore
new file mode 100644
index 000000000..d71cbe2a5
--- /dev/null
+++ b/packages/icon-kit/.gitignore
@@ -0,0 +1,4 @@
+.idea/
+dist/
+node_modules/
+.DS_Store
\ No newline at end of file
diff --git a/packages/icon-kit/CHANGELOG.md b/packages/icon-kit/CHANGELOG.md
new file mode 100644
index 000000000..f7c98df83
--- /dev/null
+++ b/packages/icon-kit/CHANGELOG.md
@@ -0,0 +1,173 @@
+# CHANGELOG.md
+
+## 5.2.0
+
+We've added *X* to the set of social network icons. Farewell Larry 🐦
+Added:
+ - `regular/x`
+ - `solid/x`
+ - `regular/tiktok`
+ - `solid/tiktok`
+ - `regular/stackoverflow`
+ - `solid/stackoverflow`
+ - `regular/slack`
+ - `solid/slack`
+ - `regular/3D`
+ - `solid/3D`
+ - `regular/AR`
+ - `solid/AR`
+
+Updated:
+ - Adjusted visual alignment of arrows and chevrons
+
+
+## 5.1.0
+
+Revelio ✨
+Added:
+ - `regular/wand-magic`
+ - `solid/wand-magic`
+ - `regular/wand-magic-sparkles`
+ - `solid/wand-magic-sparkles`
+ - `regular/sparkle`
+ - `solid/sparkle`
+ - `regular/sparkles`
+ - `solid/sparkles`
+
+
+## 5.0.0
+
+Added:
+ - `regular/artificial-intelligence`
+ - `solid/artificial-intelligence`
+ - `regular/cloud`
+ - `solid/cloud`
+ - `regular/line-column`
+ - `solid/line-column`
+ - `regular/line-column-xs`
+
+ Updated:
+ - `regular/filter`
+ - `solid/filter`
+
+ Breaking change:
+ - Renamed `delete-coloumn` to `delete-column`
+ - Renamed `insert-coloumn-after` to `insert-column-after`
+ - Renamed `insert-coloumn-before` to `insert-column-before`
+ - Removed `regular/wand-magic` (available in 5.1.0)
+ - Removed `solid/wand-magic` (available in 5.1.0)
+ - Removed `regular/wand-magic-sparkles` (available in 5.1.0)
+ - Removed `solid/wand-magic-sparkles` (available in 5.1.0)
+ - Removed `regular/sparkle` (available in 5.1.0)
+ - Removed `solid/sparkle` (available in 5.1.0)
+ - Removed `regular/sparkles` (available in 5.1.0)
+ - Removed `solid/sparkles` (available in 5.1.0)
+
+## 4.6.0
+
+Revelio ✨
+Added:
+- `regular/wand-magic`
+- `solid/wand-magic`
+- `regular/wand-magic-sparkles`
+- `solid/wand-magic-sparkles`
+- `regular/sparkle`
+- `solid/sparkle`
+- `regular/sparkles`
+- `solid/sparkles`
+
+## 4.5.0
+
+Added:
+ - `regular/image-text`
+ - `solid/image-text`
+
+## 4.4.0
+
+Changed:
+
+ - `regular/microphone-slash`
+ - `solid/microphone-slash`
+ - `regular/video-slash`
+ - `solid/video-slash`
+ - `regular/phone-slash`
+ - `solid/phone-slash`
+ - `regular/eye-slash`
+ - `solid/eye-slash`
+ - `regular/volume-mute`
+ - `solid/volume-mute`
+ - `regular/bell-slash`
+ - `solid/bell-slash`
+
+Added:
+
+ - `regular/mobile-slash`
+ - `solid/mobile-slash`
+ - `regular/tablet-slash`
+ - `solid/tablet-slash`
+ - `regular/desktop-slash`
+ - `solid/desktop-slash`
+
+## 4.3.0
+
+Added:
+
+ - `regular/globe` and `solid/globe`
+
+## 4.2.0
+
+Added:
+
+ - `regular/link-horizontal` and `solid/link-horizontal`
+ - `regular/link-horizontal-slash` and `solid/link-horizontal-slash`
+ - CSS is now generated along svgs files
+
+## 2.1.0
+
+Added:
+
+ - `regular/party-horn` and `solid/party-horn`
+ - `regular/google` and `solid/google`
+
+Fixed:
+ - Fix size and path issues of `regular/shopware` and `solid/shopware`
+
+## 2.0.0
+
+Breaking change:
+ - Updated names of icons: `solid/thumbs-up`, `regular/thumbs-up`, `regular/times-hexagon`, `regular/thumbs-down`
+
+## 1.1.0
+
+Fix:
+
+ - Before creating the SVG icons all existing icons will be deleted. This will allow to delete icons
+
+Features:
+ - Only include the `icons` folder in the NPM package
+
+
+## 1.0.0
+
+Features:
+
+ - Initial release of the icon kit
+
+
diff --git a/packages/icon-kit/LICENSE.md b/packages/icon-kit/LICENSE.md
new file mode 100644
index 000000000..0e45e2ded
--- /dev/null
+++ b/packages/icon-kit/LICENSE.md
@@ -0,0 +1,25 @@
+# The MIT License (MIT)
+
+Copyright 2023 shopware AG
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
+documentation files (the "Software"), to deal in the Software without restriction, including without limitation the
+rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit
+persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO
+THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+--------------------------------------------------------------------------------
+
+# Brand Icons
+
+All brand icons are trademarks of their respective owners. The use of these
+trademarks does not indicate endorsement of the trademark holder by Shopware, nor vice versa.
+**Please do not use brand logos for any purpose except
+to represent the company, product, or service to which they refer.**
\ No newline at end of file
diff --git a/packages/icon-kit/README.md b/packages/icon-kit/README.md
new file mode 100644
index 000000000..f1a9e3f74
--- /dev/null
+++ b/packages/icon-kit/README.md
@@ -0,0 +1,141 @@
+[](https://badge.fury.io/js/@shopware-ag%2Fmeteor-icon-kit)
+
+# meteor-icon-kit
+
+> An icon library and toolkit that follows a minimal, yet highly expressive style perfectly aligned with Shopware's product language
+
+## Prerequisites
+
+This project requires `npm` or `yarn`.
+[npm](http://npmjs.org/) and [yarn](https://yarnpkg.com/) are really easy to install.
+To make sure you have one of them available on your machine,
+try running the following command. This project itself was created with `npm`.
+
+```sh
+$ npm -v
+8.1.0
+
+$ yarn -v
+1.22.15
+```
+
+## Table of contents
+
+- [meteor-icon-kit](#meteor-icon-kit)
+ - [Prerequisites](#prerequisites)
+ - [Table of contents](#table-of-contents)
+ - [Installation](#installation)
+ - [Usage](#usage)
+ - [Vite example](#example)
+ - [Built With](#built-with)
+ - [Figma library](#figma-library)
+ - [License](#license)
+
+## Installation
+
+**BEFORE YOU INSTALL:** please read the [prerequisites](#prerequisites)
+
+To install the meteor-icon-kit, run:
+
+```sh
+$ npm install @shopware-ag/meteor-icon-kit
+```
+
+Or if you prefer using Yarn:
+
+```sh
+$ yarn add @shopware-ag/meteor-icon-kit
+```
+
+## Usage
+
+Start by importing/using the provided styling.
+Either utilizing sass/scss:
+```scss
+@import '@shopware-ag/meteor-icon-kit/icons/meteor-icon-kit.scss';
+```
+
+Or classic via the css file:
+
+```html
+
+```
+
+Then, you can use the icons:
+```js
+import wallet from '@shopware-ag/meteor-icon-kit/icons/regular/wallet.svg';
+```
+
+### Dynamic colors
+
+Take this pseudo html:
+```html
+
+
+
+```
+
+By defining the following class structure in `CSS` you can change the color of the svg dynamically:
+```CSS
+.icon-example {
+ display: block;
+ color: green;
+
+ svg {
+ fill: currentColor;
+
+ path,
+ use {
+ fill: currentColor;
+ }
+ }
+}
+```
+
+## Example
+
+Following is an example for a Vue3 project using Vite as a bundler.
+We are using the `vite-svg-loader` to load the svg files.
+
+In your `vite.config.js` add the following:
+```js
+//...
+import svgLoader from 'vite-svg-loader';
+
+export default {
+ plugins: [
+ //...
+ svgLoader()
+ ],
+};
+
+```
+
+This way you can import your svg files as components:
+```vue
+
+
+
+
+
+```
+
+You can find this example as a CodeSandbox template [here](https://codesandbox.io/p/sandbox/meteor-icon-kit-example-revdlr).
+
+## Built With
+
+* Typescript
+* Figma API
+* VS-Code
+* Love :blue_heart: :blue_heart: :blue_heart:
+
+## Figma library
+Meteor Icon Kit is available as a [Figma library](https://www.figma.com/community/file/1032564947404478461/Meteor-Icon-Kit-%E2%80%93-Shopware) through the Figma Community. To use the icons, log in to your Figma account and duplicate the file to your drafts.
+
+## License
+
+See the [LICENSE](LICENSE.md) file for license rights and limitations (MIT).
+
+2023 © shopware AG
diff --git a/packages/icon-kit/docs/.gitignore b/packages/icon-kit/docs/.gitignore
new file mode 100644
index 000000000..94aeb8462
--- /dev/null
+++ b/packages/icon-kit/docs/.gitignore
@@ -0,0 +1,3 @@
+node_modules/
+.vitepress/dist/
+public/icons/
diff --git a/packages/icon-kit/docs/components/IconDisplay.vue b/packages/icon-kit/docs/components/IconDisplay.vue
new file mode 100644
index 000000000..64424ad74
--- /dev/null
+++ b/packages/icon-kit/docs/components/IconDisplay.vue
@@ -0,0 +1,62 @@
+
+
+
+
+ {{ icon.name }}
+
+ {{ icon.name }}
+
+
+
+
+
+
diff --git a/packages/icon-kit/docs/components/IconSelection.vue b/packages/icon-kit/docs/components/IconSelection.vue
new file mode 100644
index 000000000..819254091
--- /dev/null
+++ b/packages/icon-kit/docs/components/IconSelection.vue
@@ -0,0 +1,165 @@
+
+
+
+
+
+
{{ icon.name }}
+
+ {{ tag }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Redirecting....
+
+ To open the Meteor icon kit, please follow this link!
+
+
+
\ No newline at end of file
diff --git a/packages/icon-kit/src/figma/index.ts b/packages/icon-kit/src/figma/index.ts
new file mode 100644
index 000000000..14b39ef71
--- /dev/null
+++ b/packages/icon-kit/src/figma/index.ts
@@ -0,0 +1,107 @@
+import type {AxiosPromise, AxiosRequestHeaders, AxiosResponse } from 'axios';
+import Axios from 'axios';
+
+export type node = {
+ id: string,
+ name: string,
+ type: 'DOCUMENT' | 'CANVAS' | 'PAGE',
+ children?: node[],
+ description: string,
+}
+
+type FigmaFileResponse = {
+ document: node,
+}
+
+type FigmaImageResponse = {
+ err: null | unknown,
+ images: {
+ [nodeId: string]: string,
+ },
+}
+
+type FigmaNodeResponse = {
+ components: node[],
+}
+
+export enum IconMode {
+ REGULAR = 'regular',
+ SOLID = 'solid',
+}
+
+export enum IconSize {
+ DEFAULT = '',
+ S = 's',
+ XS = 'xs',
+ XXS = 'xxs',
+}
+
+export type Icon = {
+ image: string,
+ nodeId: string,
+ description?: string,
+ tags?: string[],
+}
+
+export type Meta = {
+ name: string,
+ basename: string,
+ mode: IconMode,
+ size: IconSize,
+ tags: string[],
+ sizes: string[],
+ modes: string[],
+ related: string[],
+}
+
+export default class FigmaApiClient {
+ httpClient = Axios.create({
+ baseURL: 'https://api.figma.com/v1',
+ });
+
+ public getFile(key ?: string): Promise> {
+ if (!key) {
+ key = process.env.FIGMA_FILE;
+ }
+
+ return this.httpClient.get(
+ `/files/${key}`,
+ {
+ headers: this.getHeaders(),
+ }
+ );
+ }
+
+ public getImages(ids: string[]): Promise> {
+ return this.httpClient.get(
+ `/images/${process.env.FIGMA_FILE}?format=svg&ids=${ids.join(',')}`,
+ {
+ headers: this.getHeaders(),
+ }
+ );
+ }
+
+ public downloadImage(url: string): AxiosPromise
+ {
+ return Axios({
+ url,
+ method: 'GET',
+ responseType: 'blob',
+ });
+ }
+
+ public getNodeInfo(ids: string[]): Promise> {
+ return this.httpClient.get(
+ `/files/${process.env.FIGMA_FILE}?ids=${ids.join(',')}`,
+ {
+ headers: this.getHeaders(),
+ }
+ );
+ }
+
+ private getHeaders(): AxiosRequestHeaders {
+ return {
+ 'X-Figma-Token': process.env.FIGMA_TOKEN,
+ };
+ }
+}
diff --git a/packages/icon-kit/src/figma/util/index.ts b/packages/icon-kit/src/figma/util/index.ts
new file mode 100644
index 000000000..069f08546
--- /dev/null
+++ b/packages/icon-kit/src/figma/util/index.ts
@@ -0,0 +1,143 @@
+import type {Icon, IconMode, Meta, node} from '../index';
+import FigmaApiClient, {IconSize} from '../index';
+
+export default class FigmaUtil {
+ public async buildIconMap(document: node): Promise> {
+ const client = new FigmaApiClient();
+ const iconNodes = this.getIconNodes(document);
+ const iconMap: Map = new Map();
+
+ while(iconNodes.length) {
+ // Get svgs in 300 chunks max
+ const chunk = iconNodes.splice(0, 300);
+ const svgs = (await client.getImages(chunk.map(node => node.id))).data;
+
+ if (svgs.err) {
+ console.error(svgs.err);
+ }
+
+ Object.keys(svgs.images).forEach((nodeId) => {
+ const node = chunk.find(n => n.id === nodeId);
+
+ iconMap.set(node.name, {
+ image: svgs.images[nodeId],
+ nodeId: nodeId,
+ });
+ });
+ }
+
+ const nodeIds: string[] = Array.from(iconMap.values()).map(({nodeId}) => nodeId);
+
+ const components: node[] = (await client.getNodeInfo(nodeIds)).data.components;
+ Object.values(components).forEach((component: node) => {
+ iconMap.set(component.name, {
+ ...iconMap.get(component.name),
+ description: component.description,
+ });
+ });
+
+ return iconMap;
+ }
+
+ public buildMeta(iconMap: Map): Meta[] {
+ const metas:Meta[] = [];
+ const sizes = ['s', 'xs', 'xxs'];
+ const modes = ['regular', 'solid'];
+ Array.from(iconMap.keys()).forEach(key => {
+ const name: string = key.split('/')[2];
+ const mode: string = key.split('/')[1];
+ let size: string = IconSize.DEFAULT;
+ let basename: string = name;
+
+ sizes.forEach(mySize => {
+ const suffix = `-${mySize}`;
+ if (!name.endsWith(suffix)) {
+ return;
+ }
+
+ basename = name.substring(0, name.length - suffix.length);
+ size = mySize;
+ });
+
+ // Extract tags from the description
+ const description: string = (iconMap.get(key).description.split('🔎')[1] || '').split('\n')[0].trim();
+ let tags: string[] = [];
+ if (description.startsWith('[') && description.endsWith(']')) {
+ tags = description.substring(1, description.length - 1).split(',').map(tag => tag.trim());
+ }
+
+ const mySizes: string[] = [];
+ const myModes: string[] = [];
+
+ if (iconMap.has(`icons/${mode}/${basename}`)) {
+ mySizes.push('');
+ }
+
+ // Find all available sizes
+ sizes.forEach(size => {
+ if (iconMap.has(`icons/${mode}/${basename}-${size}`)) {
+ mySizes.push(size);
+ }
+ });
+
+ // Find all available modes
+ modes.forEach(mode => {
+ if (iconMap.has(`icons/${mode}/${name}`)) {
+ myModes.push(mode);
+ }
+ });
+
+ metas.push({
+ name,
+ basename,
+ mode: mode as IconMode,
+ size: size as IconSize,
+ tags,
+ sizes: mySizes,
+ modes: myModes,
+ related: [],
+ });
+ });
+
+ // Find all related icons with matching tags
+ metas.forEach((meta: Meta, key: number) => {
+ meta.tags.forEach((tag: string) => {
+ metas.forEach((secondMeta: Meta, secondKey: number) => {
+ if (metas[secondKey].tags.includes(tag)) {
+ metas[key].related.push(secondMeta.name);
+ }
+ });
+ });
+ // Make unique items
+ metas[key].related = [...new Set(metas[key].related)];
+ });
+
+ return metas.sort((a, b) => {
+ if (a.name < b.name) {
+ return -1;
+ }
+
+ if (a.name > b.name) {
+ return 1;
+ }
+
+ return 0;
+ });
+ }
+
+ private getIconNodes(document: node): node[] {
+ if (!document?.children) {
+ return [];
+ }
+
+ const icons: node[] = [];
+
+ icons.push(...document.children.filter(node => node.name.startsWith('icons/')));
+
+ document.children.forEach(node => {
+ icons.push(...this.getIconNodes(node));
+ });
+
+ return icons;
+ }
+}
diff --git a/packages/icon-kit/src/index.ts b/packages/icon-kit/src/index.ts
new file mode 100644
index 000000000..e692f6a2d
--- /dev/null
+++ b/packages/icon-kit/src/index.ts
@@ -0,0 +1,116 @@
+import type {Icon} from './figma';
+import FigmaApiClient from './figma';
+import FigmaUtil from './figma/util';
+import * as fse from 'fs-extra';
+import chalk from 'chalk';
+import * as cliProgress from 'cli-progress';
+import type {OptimizedSvg} from 'svgo';
+import {optimize} from 'svgo';
+import md5 from 'js-md5';
+import {PromisePool} from '@supercharge/promise-pool';
+// @ts-expect-error - this dependency has no type definitions
+import * as svgoAutocrop from 'svgo-autocrop';
+
+const client = new FigmaApiClient();
+const util = new FigmaUtil();
+
+console.log(chalk.green('Clean up...'));
+
+fse.removeSync(`${__dirname}/../icons`);
+
+console.log(chalk.green('Fetching Figma file stand by...'));
+
+client.getFile().then(async (response) => {
+ const iconOverview = response.data.document.children.find(node => node.id === '217:6');
+
+ console.log(chalk.green('Gathering icons...'));
+ const iconMap = await util.buildIconMap(iconOverview);
+ const meta = util.buildMeta(iconMap);
+
+ console.log(chalk.green('Downloading and optimizing icons...'));
+ const bar = new cliProgress.SingleBar({}, cliProgress.Presets.shades_classic);
+
+ bar.start(iconMap.size, 0);
+
+ //Const promises: Promise[] = [];
+ const styling = [] as { name: string, width: string, height: string }[];
+
+ await PromisePool
+ .for(Array.from(iconMap.keys()))
+ .withConcurrency(25)
+ .onTaskFinished((iconName, pool) => {
+ bar.update(pool.processedItems().length);
+ })
+ .process(async (iconName: string) => {
+ const icon: Icon = iconMap.get(iconName);
+
+ const result = await client.downloadImage(icon.image);
+ const svg = result.data as string;
+
+ // Remove width/height from SVGs
+ const optimizedSvgResult = optimize(svg, {
+ // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+ plugins: [
+ {name: 'removeDimensions'},
+ {
+ ...svgoAutocrop,
+ params: {
+ disableTranslateWarning: true,
+ },
+ },
+ ],
+ }) as OptimizedSvg;
+
+ let optimizedSvg = optimizedSvgResult.data;
+
+ const viewBox = optimizedSvg.match(/viewBox="(\d*) (\d*) (\d*) (\d*)"/);
+ if (viewBox) {
+ const width = viewBox[3];
+ const height = viewBox[4];
+ const className = iconName.replace(/icons\//, '').replace(/\//g, '-');
+
+ // Add class name to SVG
+ optimizedSvg = optimizedSvg.replace(/