Add symbols (constant, variable etc…) icons (#1134)

* Add `variable` icon

* Add `constant` icon

* Add `pi` (constant) icon

* Update icons/pi.svg

Co-authored-by: Jakob Guddas <github@jguddas.de>

* Refine `pi` icon

---------

Co-authored-by: Jakob Guddas <github@jguddas.de>

.github/workflows/pull-request.yml

@@ -22,8 +22,78 @@ jobs:
         uses: tj-actions/changed-files@v35
         with:
           files: icons/*.svg
-      - name: Generate comment
+      - name: Generate cohesion check random
-        id: generate-comment
+        id: generate-cohesion-check-random
+        run: |
+          delimiter="$(openssl rand -hex 8)"
+          echo "body<<$delimiter" >> $GITHUB_OUTPUT
+          for file in $(printf "%s\\n" icons/*.svg | shuf | head -n$(awk -F' ' '{print NF}' <<< '${{ steps.changed-files.outputs.all_changed_files }}')); do
+            cat "$file" | # get file content
+            tr '\n' ' ' | # remove line breaks
+            sed -e 's/<svg[^>]*>/<svg>/g' | # remove attributes from svg element
+            base64 -w 0 | # encode svg
+            sed "s|.*|<img title=\"$file\" alt=\"$file\" src=\"https://lucide.dev/api/gh-icon/stroke-width/2/&.svg\"/> |"
+          done | tr '\n' ' ' >> $GITHUB_OUTPUT
+          echo >> $GITHUB_OUTPUT
+          echo "$delimiter" >> $GITHUB_OUTPUT
+      - name: Generate cohesion check squares
+        id: generate-cohesion-check-squares
+        run: |
+          delimiter="$(openssl rand -hex 8)"
+          echo "body<<$delimiter" >> $GITHUB_OUTPUT
+          for file in $(printf "%s\\n" icons/*square*.svg | shuf | head -n$(awk -F' ' '{print NF}' <<< '${{ steps.changed-files.outputs.all_changed_files }}')); do
+            cat "$file" | # get file content
+            tr '\n' ' ' | # remove line breaks
+            sed -e 's/<svg[^>]*>/<svg>/g' | # remove attributes from svg element
+            base64 -w 0 | # encode svg
+            sed "s|.*|<img title=\"$file\" alt=\"$file\" src=\"https://lucide.dev/api/gh-icon/stroke-width/2/&.svg\"/> |"
+          done | tr '\n' ' ' >> $GITHUB_OUTPUT
+          echo >> $GITHUB_OUTPUT
+          echo "$delimiter" >> $GITHUB_OUTPUT
+      - name: Generate 1px stroke-width
+        id: generate-1px-stroke-width
+        run: |
+          delimiter="$(openssl rand -hex 8)"
+          echo "body<<$delimiter" >> $GITHUB_OUTPUT
+          for file in ${{ steps.changed-files.outputs.all_changed_files }}; do
+            cat "$file" | # get file content
+            tr '\n' ' ' | # remove line breaks
+            sed -e 's/<svg[^>]*>/<svg>/g' | # remove attributes from svg element
+            base64 -w 0 | # encode svg
+            sed "s|.*|<img title=\"$file\" alt=\"$file\" src=\"https://lucide.dev/api/gh-icon/stroke-width/1/&.svg\"/> |"
+          done | tr '\n' ' ' >> $GITHUB_OUTPUT
+          echo >> $GITHUB_OUTPUT
+          echo "$delimiter" >> $GITHUB_OUTPUT
+      - name: Generate 2px stroke-width
+        id: generate-2px-stroke-width
+        run: |
+          delimiter="$(openssl rand -hex 8)"
+          echo "body<<$delimiter" >> $GITHUB_OUTPUT
+          for file in ${{ steps.changed-files.outputs.all_changed_files }}; do
+            cat "$file" | # get file content
+            tr '\n' ' ' | # remove line breaks
+            sed -e 's/<svg[^>]*>/<svg>/g' | # remove attributes from svg element
+            base64 -w 0 | # encode svg
+            sed "s|.*|<img title=\"$file\" alt=\"$file\" src=\"https://lucide.dev/api/gh-icon/stroke-width/2/&.svg\"/> |"
+          done | tr '\n' ' ' >> $GITHUB_OUTPUT
+          echo >> $GITHUB_OUTPUT
+          echo "$delimiter" >> $GITHUB_OUTPUT
+      - name: Generate 3px stroke-width
+        id: generate-3px-stroke-width
+        run: |
+          delimiter="$(openssl rand -hex 8)"
+          echo "body<<$delimiter" >> $GITHUB_OUTPUT
+          for file in ${{ steps.changed-files.outputs.all_changed_files }}; do
+            cat "$file" | # get file content
+            tr '\n' ' ' | # remove line breaks
+            sed -e 's/<svg[^>]*>/<svg>/g' | # remove attributes from svg element
+            base64 -w 0 | # encode svg
+            sed "s|.*|<img title=\"$file\" alt=\"$file\" src=\"https://lucide.dev/api/gh-icon/stroke-width/3/&.svg\"/> |"
+          done | tr '\n' ' ' >> $GITHUB_OUTPUT
+          echo >> $GITHUB_OUTPUT
+          echo "$delimiter" >> $GITHUB_OUTPUT
+      - name: Generate X-rays
+        id: generate-x-rays
         run: |
           delimiter="$(openssl rand -hex 8)"
           echo "body<<$delimiter" >> $GITHUB_OUTPUT
@@ -50,8 +120,21 @@ jobs:
           issue-number: ${{ github.event.pull_request.number }}
           body: |
             ### Added or changed icons
+            ${{ steps.generate-2px-stroke-width.outputs.body }}<br/>
+            <details>
+            <summary>Preview cohesion</summary>
+            ${{ steps.generate-cohesion-check-squares.outputs.body }}<br/>
+            ${{ steps.generate-2px-stroke-width.outputs.body }}<br/>
+            ${{ steps.generate-cohesion-check-random.outputs.body }}<br/>
+            </details>
+            <details>
+            <summary>Preview stroke widths</summary>
+            ${{ steps.generate-1px-stroke-width.outputs.body }}<br/>
+            ${{ steps.generate-2px-stroke-width.outputs.body }}<br/>
+            ${{ steps.generate-3px-stroke-width.outputs.body }}<br/>
+            </details>
             <details>
             <summary>Icon X-rays</summary>
-            ${{ steps.generate-comment.outputs.body }}
+            ${{ steps.generate-x-rays.outputs.body }}
             </details>
           edit-mode: replace

icons/case-lower.svg

@@ -9,8 +9,8 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <circle cx="17" cy="12" r="3" />
-  <line x1="14" x2="14" y1="7" y2="15" />
   <circle cx="7" cy="12" r="3" />
-  <line x1="10" x2="10" y1="9" y2="15" />
+  <path d="M10 9v6" />
+  <circle cx="17" cy="12" r="3" />
+  <path d="M14 7v8" />
 </svg>

icons/case-sensitive.svg

@@ -9,8 +9,8 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <polyline points="3,15 7,7 11,15" />
+  <path d="m3 15 4-8 4 8" />
-  <line x1="4" x2="10" y1="13" y2="13" />
+  <path d="M4 13h6" />
   <circle cx="18" cy="12" r="3" />
-  <line x1="21" x2="21" y1="9" y2="15" />
+  <path d="M21 9v6" />
 </svg>

icons/case-upper.svg

@@ -9,8 +9,7 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <polyline points="3,15 7,7 11,15" />
+  <path d="m3 15 4-8 4 8" />
-  <line x1="4" x2="10" y1="13" y2="13" />
+  <path d="M4 13h6" />
-  <path d="M15 7h4c1.1 0 2 .9 2 2s-.9 2-2 2h-4V7z" />
+  <path d="M15 11h4.5a2 2 0 0 1 0 4H15V7h4a2 2 0 0 1 0 4" />
-  <path d="M15 11h4.5c1.1 0 2 .9 2 2s-.9 2-2 2H15v-4z" />
 </svg>

icons/circle-dot.json

@@ -4,7 +4,11 @@
     "pending",
     "dot",
     "progress",
-    "issue"
+    "issue",
+    "radio button",
+    "choices",
+    "multiple choice",
+    "choose"
   ],
   "categories": [
     "shapes"

icons/layout-dashboard.svg

@@ -9,8 +9,8 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <rect width="7" height="9" x="3" y="3" />
+  <rect width="7" height="9" x="3" y="3" rx="1" />
-  <rect width="7" height="5" x="14" y="3" />
+  <rect width="7" height="5" x="14" y="3" rx="1" />
-  <rect width="7" height="9" x="14" y="12" />
+  <rect width="7" height="9" x="14" y="12" rx="1" />
-  <rect width="7" height="5" x="3" y="16" />
+  <rect width="7" height="5" x="3" y="16" rx="1" />
 </svg>

icons/layout-grid.svg

@@ -9,8 +9,8 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <rect width="7" height="7" x="3" y="3" />
+  <rect width="7" height="7" x="3" y="3" rx="1" />
-  <rect width="7" height="7" x="14" y="3" />
+  <rect width="7" height="7" x="14" y="3" rx="1" />
-  <rect width="7" height="7" x="14" y="14" />
+  <rect width="7" height="7" x="14" y="14" rx="1" />
-  <rect width="7" height="7" x="3" y="14" />
+  <rect width="7" height="7" x="3" y="14" rx="1" />
 </svg>

icons/layout-list.svg

@@ -9,8 +9,8 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <rect width="7" height="7" x="3" y="14" />
+  <rect width="7" height="7" x="3" y="14" rx="1" />
-  <rect width="7" height="7" x="3" y="3" />
+  <rect width="7" height="7" x="3" y="3" rx="1" />
   <line x1="14" x2="21" y1="4" y2="4" />
   <line x1="14" x2="21" y1="9" y2="9" />
   <line x1="14" x2="21" y1="15" y2="15" />

icons/layout-panel-left.json

@@ -0,0 +1,13 @@
+{
+  "$schema": "../icon.schema.json",
+  "tags": [
+    "app",
+    "home",
+    "start",
+    "grid"
+  ],
+  "categories": [
+    "design",
+    "layout"
+  ]
+}

icons/layout-panel-left.svg

@@ -0,0 +1,15 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <rect width="7" height="18" x="3" y="3" rx="1" />
+  <rect width="7" height="7" x="14" y="3" rx="1" />
+  <rect width="7" height="7" x="14" y="14" rx="1" />
+</svg>

icons/layout-panel-top.json

@@ -0,0 +1,15 @@
+{
+  "$schema": "../icon.schema.json",
+  "tags": [
+    "window",
+    "webpage",
+    "block",
+    "section",
+    "grid",
+    "template",
+    "structure"
+  ],
+  "categories": [
+    "layout"
+  ]
+}

icons/layout-panel-top.svg

@@ -0,0 +1,15 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <rect width="18" height="7" x="3" y="3" rx="1" />
+  <rect width="7" height="7" x="3" y="14" rx="1" />
+  <rect width="7" height="7" x="14" y="14" rx="1" />
+</svg>

icons/layout-template.svg

@@ -9,7 +9,7 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <path d="M21 3H3v7h18V3z" />
+  <rect width="18" height="7" x="3" y="3" rx="1" />
-  <path d="M21 14h-5v7h5v-7z" />
+  <rect width="9" height="7" x="3" y="14" rx="1" />
-  <path d="M12 14H3v7h9v-7z" />
+  <rect width="5" height="7" x="16" y="14" rx="1" />
 </svg>

icons/pi.json

@@ -0,0 +1,18 @@
+{
+  "$schema": "../icon.schema.json",
+  "tags": [
+    "constant",
+    "code",
+    "coding",
+    "programming",
+    "symbol",
+    "trigonometry",
+    "geometry",
+    "formula"
+  ],
+  "categories": [
+    "development",
+    "maths",
+    "shapes"
+  ]
+}

icons/pi.svg

@@ -0,0 +1,15 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <line x1="9" x2="9" y1="4" y2="20" />
+  <path d="M4 7c0-1.7 1.3-3 3-3h13" />
+  <path d="M18 20c-1.7 0-3-1.3-3-3V4" />
+</svg>

icons/sigma.json

@@ -4,7 +4,9 @@
     "sum",
     "calculate",
     "formula",
-    "maths"
+    "maths",
+    "enumeration",
+    "enumerate"
   ],
   "categories": [
     "text",

icons/space.svg

@@ -9,5 +9,5 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <polyline points="22,17 22,19 2,19 2,17" />
+  <path d="M22 17v1c0 .5-.5 1-1 1H3c-.5 0-1-.5-1-1v-1" />
 </svg>

icons/sparkles.json

@@ -1,10 +1,10 @@
 {
   "$schema": "../icon.schema.json",
   "tags": [
+    "stars",
     "effect",
     "filter",
     "night",
-    "sparkles",
     "magic"
   ],
   "categories": [
@@ -13,5 +13,8 @@
     "multimedia",
     "gaming",
     "weather"
+  ],
+  "aliases": [
+    "stars"
   ]
 }

icons/triangle.json

@@ -1,8 +1,11 @@
 {
   "$schema": "../icon.schema.json",
   "tags": [
+    "equilateral",
     "delta",
-    "shape"
+    "shape",
+    "pyramid",
+    "hierarchy"
   ],
   "categories": [
     "shapes"

icons/variable.json

@@ -0,0 +1,19 @@
+{
+  "$schema": "../icon.schema.json",
+  "tags": [
+    "code",
+    "coding",
+    "programming",
+    "symbol",
+    "calculate",
+    "algebra",
+    "x",
+    "parentheses",
+    "parenthesis",
+    "brackets"
+  ],
+  "categories": [
+    "development",
+    "maths"
+  ]
+}

icons/variable.svg

@@ -0,0 +1,16 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M8 21s-4-3-4-9 4-9 4-9" />
+  <path d="M16 3s4 3 4 9-4 9-4 9" />
+  <line x1="15" x2="9" y1="9" y2="15" />
+  <line x1="9" x2="15" y1="9" y2="15" />
+</svg>

icons/whole-word.svg

@@ -9,9 +9,9 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <circle cx="17" cy="12" r="3" />
-  <line x1="14" x2="14" y1="7" y2="15" />
   <circle cx="7" cy="12" r="3" />
-  <line x1="10" x2="10" y1="9" y2="15" />
+  <path d="M10 9v6" />
-  <polyline points="22,17 22,19 2,19 2,17" />
+  <circle cx="17" cy="12" r="3" />
+  <path d="M14 7v8" />
+  <path d="M22 17v1c0 .5-.5 1-1 1H3c-.5 0-1-.5-1-1v-1" />
 </svg>

packages/lucide-angular/package.json

@@ -77,7 +77,7 @@
     "zone.js": "~0.11.4"
   },
   "peerDependencies": {
-    "@angular/common": "13.x - 15.x",
+    "@angular/common": "13.x - 16.x",
-    "@angular/core": "13.x - 15.x"
+    "@angular/core": "13.x - 16.x"
   }
 }

site/src/pages/api/gh-icon/stroke-width/[...data].tsx

@@ -0,0 +1,29 @@
+import { parseSync } from 'svgson';
+import { createLucideIcon, IconNode } from 'lucide-react';
+
+export default async function handler(req, res) {
+  // ReactDOMServer needs to be imported dynamically
+  // https://github.com/vercel/next.js/issues/43810
+  const ReactDOMServer = (await import('react-dom/server')).default;
+
+  const url = req.url.split('/');
+  const src = Buffer.from(url.at(-1).slice(0, -4), 'base64').toString('utf8');
+
+  const Icon = createLucideIcon(
+    'icon',
+    parseSync(src.includes('<svg') ? src : `<svg>${src}</svg>`).children.map(
+      ({ name, attributes }) => [name, attributes]
+    ) as IconNode
+  );
+
+  const svg = Buffer.from(
+    ReactDOMServer.renderToString(<Icon strokeWidth={url.at(-2)} />).replace(
+      />/,
+      '><style>@media screen and (prefers-color-scheme: dark) { svg { stroke: #fff } }</style>'
+    )
+  );
+
+  res.setHeader('Cache-Control', 'public,max-age=31536000');
+  res.setHeader('Content-Type', 'image/svg+xml');
+  res.status(200).end(svg);
+}