[filigran-web][Icons] Automate icon creation

.github/workflows/icons.yml

@@ -0,0 +1,64 @@
+name: Add svg Icons
+
+on:
+  pull_request:
+    branches:
+      - 'main'
+  workflow_dispatch:
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+          cache: ${{ steps.detect-package-manager.outputs.manager }}
+      - name: Restore cache
+        uses: actions/cache@v4
+        with:
+          path: |
+            projects/filigran-website/.next/cache
+          # Generate a new cache whenever packages or source files change.
+          key: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-${{ hashFiles('**.[jt]s', '**.[jt]sx') }}
+          # If source files changed but packages didn't, rebuild from a prior cache.
+          restore-keys: |
+            ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-
+      - name: Install dependencies
+        run: ${{ steps.detect-package-manager.outputs.manager }} ${{ steps.detect-package-manager.outputs.command }}
+      - name: Install svgr/cli
+        run: yarn global add @svgr/cli
+      - name: Install rimraf and tsup
+        run: yarn global add rimraf tsup
+      - name: Run extract-icons
+        run: cd packages/filigran-icon && yarn extract-icons
+        env:
+          FIGMA_FILE_ID: ${{ secrets.FIGMA_FILE_ID_ICONS }}
+          FIGMA_API_TOKEN: ${{ secrets.FIGMA_API_TOKEN }}
+
+      - name: Run svgr
+        run: cd packages/filigran-icon && yarn svgr
+
+      - name: Run build
+        run: cd packages/filigran-icon && yarn build
+      - name: Commit changes
+        run: |
+          git config --global user.name 'github-actions[bot]'
+          git config --global user.email 'github-actions[bot]@users.noreply.github.com'
+          git checkout -b update-icons-branch
+          git add .
+          git commit -m "Update icons and build artifacts"
+          git push origin update-icons-branch
+
+      - name: Create Pull Request
+        uses: peter-evans/create-pull-request@v5
+        with:
+          token: ${{ secrets.TOKEN_GITHUB }}
+          branch: update-icons-branch
+          title: "Update icons and build artifacts"
+          body: "This PR was automatically created by GitHub Actions after building the icons."
+          base: main

projects/filigran-website/components/display-all-icons.tsx

@@ -65,7 +65,9 @@ export const DisplayAllIcons = () => {
               </div>
               <div className="flex flex-row items-center align-middle">
                 <div className="rounded bg-gray-1000 p-s text-gray-50">
+                  {'<'}
                   {icon}
+                  {' className="h-4 w-4"/>'}
                 </div>{' '}
                 <Button
                   variant={'ghost'}

projects/filigran-website/components/example/color.tsx

@@ -529,7 +529,7 @@ export function Colors() {
     colorValue: string | null
     colorBackground: string | null
   } | null>({colorBackground: 'bg-gray-1000', colorValue: '00020c'})
-  const [contrastRatio, setContrastRatio] = useState<number>(5.41)
+  const [contrastRatio, setContrastRatio] = useState<number>(18.85)
 
   const hexToRgb = (hex: string) => {
     let bigint = parseInt(hex, 16)

projects/filigran-website/content/docs/components/1-filigran-logo.mdx

@@ -2,4 +2,26 @@
 title: Filigran Icon
 ---
 
+# How to add icons to this catalog :
+
+## Add icon to Figma :
+
+- In the sheet where all icons are, right click > Plugin > Material Symbols
+
+- Get your symbol from here, and then click on it. (you can add several ones)
+
+- It is added to the Figma, but check that it is on **the same Layer** with other icons (#Filigran Icon) in the left panel.
+
+- If it is not, you can drag&drop it in the correct layer.
+
+## Launch the corresponding GitHub Action
+
+- On gitHub, go to the "Actions" tab
+
+- Launch the action called "Add svg Icons"
+
+- It creates a pull request. You need to merge it to find the new icon on the Filigran-Website.
+
+
+
 <DisplayAllIcons />