Merge branch 'main' into studio/milestone

lucide-icons · Aug 2, 2024 · b57cd09 · b57cd09
2 parents 8b7d40f + cf5d6fc
commit b57cd09
Show file tree

Hide file tree

Showing 221 changed files with 1,999 additions and 293 deletions.
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -39,6 +39,8 @@ You can also [download an Adobe Illustrator template](https://github.com/lucide-
 
 #### [Figma Guide](https://lucide.dev/docs/figma-guide)
 
+#### [Affinity Designer Guide](https://lucide.dev/guide/design/affinity-designer-guide)
+
 ### Submitting Multiple Icons
 
 If you want submit multiple icons, please separate the icons and group them. That makes reviewing the icons easier and keep the thread clean and scoped.

diff --git a/docs/.vitepress/api/gh-icon/[...data].get.ts b/docs/.vitepress/api/gh-icon/[...data].get.ts
@@ -13,7 +13,10 @@ export default eventHandler((event) => {
   const data = pathData.at(-1).slice(0, -4);
   const [name] = pathData;
 
-  const src = Buffer.from(data, 'base64').toString('utf8');
+  const src = Buffer.from(data, 'base64')
+    .toString('utf8')
+    .replaceAll('\n', '')
+    .replace(/<svg[^>]*>|<\/svg>/g, '');
 
   const children = [];
 
@@ -30,7 +33,7 @@ export default eventHandler((event) => {
 
     const LucideIcon = createLucideIcon(backdropName, iconNode);
     const svg = renderToStaticMarkup(createElement(LucideIcon));
-    const backdropString = svg.replace(/<svg[^>]*>|<\/svg>/g, '');
+    const backdropString = svg.replaceAll('\n', '').replace(/<svg[^>]*>|<\/svg>/g, '');
 
     children.push(
       createElement(Backdrop, {
@@ -39,6 +42,15 @@ export default eventHandler((event) => {
         color: name in iconNodes ? 'red' : '#777',
       }),
     );
+    if (name in iconNodes) {
+      children.push(
+        createElement(Backdrop, {
+          backdropString: src,
+          src: backdropString,
+          color: 'lime',
+        }),
+      );
+    }
   }
 
   const svg = Buffer.from(

diff --git a/docs/.vitepress/lib/SvgPreview/Backdrop.tsx b/docs/.vitepress/lib/SvgPreview/Backdrop.tsx
@@ -7,11 +7,12 @@ interface BackdropProps {
 }
 
 const Backdrop = ({ src, color = 'red', backdropString }: BackdropProps): JSX.Element => {
+  const id = React.useId();
   return (
     <>
       <defs xmlns="http://www.w3.org/2000/svg">
         <pattern
-          id="pattern"
+          id={`pattern-${id}`}
           width=".1"
           height=".1"
           patternUnits="userSpaceOnUse"
@@ -30,69 +31,56 @@ const Backdrop = ({ src, color = 'red', backdropString }: BackdropProps): JSX.El
         </pattern>
       </defs>
       <mask
-        id="svg-preview-backdrop-mask-outline"
+        id={`svg-preview-backdrop-mask-${id}`}
         maskUnits="userSpaceOnUse"
       >
         <g
           stroke="#fff"
           dangerouslySetInnerHTML={{ __html: backdropString }}
         />
-        <g
-          dangerouslySetInnerHTML={{ __html: src }}
-          strokeWidth={2.05}
-        />
+        <g dangerouslySetInnerHTML={{ __html: src }} />
       </mask>
       <mask
-        id="svg-preview-backdrop-mask-fill"
+        id={`svg-preview-backdrop-mask-outline-${id}`}
         maskUnits="userSpaceOnUse"
       >
-        <g
-          stroke="#fff"
-          dangerouslySetInnerHTML={{ __html: backdropString }}
-        />
-        <g
-          dangerouslySetInnerHTML={{ __html: src }}
-          strokeWidth={2.05}
+        <rect
+          x="0"
+          y="0"
+          width="24"
+          height="24"
+          fill="#fff"
+          stroke="none"
         />
         <g
           strokeWidth={1.75}
           dangerouslySetInnerHTML={{ __html: backdropString }}
         />
       </mask>
-      <g
-        strokeWidth={2.25}
-        stroke="url(#pattern)"
-        mask={'url(#svg-preview-backdrop-mask-outline)'}
-      >
+      <g mask={`url(#svg-preview-backdrop-mask-${id})`}>
         <rect
           x="0"
           y="0"
           width="24"
           height="24"
-          fill="url(#pattern)"
           opacity={0.5}
+          fill={`url(#pattern-${id})`}
           stroke="none"
         />
+        <g
+          stroke={color}
+          strokeWidth={2.25}
+          opacity={0.75}
+          dangerouslySetInnerHTML={{ __html: src }}
+        />
+        <g
+          stroke={color}
+          strokeWidth={2.25}
+          opacity={0.75}
+          mask={`url(#svg-preview-backdrop-mask-outline-${id})`}
+          dangerouslySetInnerHTML={{ __html: backdropString }}
+        />
       </g>
-      <rect
-        x="0"
-        y="0"
-        width="24"
-        height="24"
-        fill="url(#pattern)"
-        stroke="none"
-        mask={'url(#svg-preview-backdrop-mask-fill)'}
-      />
-      <rect
-        x="0"
-        y="0"
-        width="24"
-        height="24"
-        fill={color}
-        opacity={0.5}
-        stroke="none"
-        mask={'url(#svg-preview-backdrop-mask-fill)'}
-      />
     </>
   );
 };

diff --git a/docs/.vitepress/lib/SvgPreview/index.tsx b/docs/.vitepress/lib/SvgPreview/index.tsx
@@ -301,7 +301,6 @@ const Handles = ({
   'strokeWidth' | 'stroke' | 'strokeDasharray' | 'strokeOpacity',
   any
 >) => {
-  console.log(paths);
   return (
     <g
       className="svg-preview-handles-group"

diff --git a/docs/.vitepress/sidebar.ts b/docs/.vitepress/sidebar.ts
@@ -117,6 +117,10 @@ const sidebar: UserConfig<DefaultTheme.Config>['themeConfig']['sidebar'] = {
           text: 'Designing in Figma',
           link: '/guide/design/figma-guide',
         },
+        {
+          text: 'Designing in Affinity Designer',
+          link: '/guide/design/affinity-designer-guide',
+        },
       ],
     },
   ],

diff --git a/docs/.vitepress/theme/components/overrides/VPFooter.vue b/docs/.vitepress/theme/components/overrides/VPFooter.vue
@@ -24,7 +24,7 @@ const links = computed(() => [
   },
   {
     text: 'Github',
-    href: `${githubLink.value}/issues`
+    href: `${githubLink.value}`
   },
   {
     text: 'Issues',

diff --git a/docs/guide/design/affinity-designer-guide.md b/docs/guide/design/affinity-designer-guide.md
@@ -0,0 +1,18 @@
+---
+title: Affinity Designer Template Guide
+---
+
+# Affinity Designer Template Guide
+
+This guide describes how to use the Affinity Designer template for Lucide.
+
+## General Workflow
+
+>Attention: By default, Affinity Designer sets the unit for stroke to points. Make sure that it is set to pixel. To do this, open `Preferences > User Interface`. Under `Decimal Places for Unit Types`, uncheck `Show Lines in points`.
+
+1. Download and open the [Affinity Designer template](https://github.com/lucide-icons/lucide/blob/main/docs/public/templates/affinity_designer.aftemplate).
+2. Follow the [Icon Design Principles](icon-design-guide.md) while you use the template (to ensure integrity with the Lucide icon pack).
+3. Export the file as SVG (`File > Export`). Make sure that _Rastering_ is set to _Nothing_, _Export text as curves_ is checked (hopefully, you won't need this), _Use hex colors_ is checked, and _Flatten transforms_ is checked.
+
+	 ![SVG export options in Affinity Designer](../../images/affinity-designer-export-options.png?raw=true)
+4. Optimize the exported SVG file further with [SVGOMG](https://jakearchibald.github.io/svgomg/) or [`svgo`](https://github.com/svg/svgo) (using `svgo --multipass exported_icon.svg`).
diff --git a/docs/guide/design/icon-design-guide.md b/docs/guide/design/icon-design-guide.md
@@ -109,8 +109,8 @@ Here are rules that should be followed to keep quality and consistency when maki
 7. Icons depicting multiple elements (e.g. a person and a circle) of different sizes must list these elements in decreasing order of size.\
    For example: if the circle is bigger, it should be `circle-person`, if the person is bigger, it should be `person-circle`.
 
-8. Icons depicting multiple elements of roughly equal sizes (e.g. a `ruler` and a `pencil`) must list these elements in English reading order.\
-   For example: if the `pencil` is either above or left of `ruler`, it should be `pencil-ruler`, otherwise, it should be `ruler-pencil`.
+8. Icons depicting multiple elements of roughly equal sizes (e.g. a `ruler` and a `pencil`) must list these elements front to back in case one element is in front of the other, otherwise in English reading order (top to bottom, left to right).\
+   For example: if the `pencil` is either in front of, above or left of `ruler`, it should be `pencil-ruler`, otherwise, it should be `ruler-pencil`.
 
 9. Icons depicting some sort of variation of an element must use the `[element]-[modifier]` naming scheme, with modifiers being applied to each element respectively.\
    For example: a dashed circle must be named `circle-dashed`, not `dashed-circle`, and in coordination with the previous guidelines, a dashed circle containing a broken heart would be named `circle-dashed-heart-broken`, due to the heart being smaller than the circle.

diff --git a/docs/icons/[name].md b/docs/icons/[name].md
@@ -35,7 +35,7 @@ const codeExample = computed(() => data.codeExamples?.map(
       const camelCaseName = camelCase(params.value.name)
 
       return codeExample.code
-        .replace(/\$PascalCase/g, pascalCaseName)
+        .replace(/\$(?:<[^>]+>)*PascalCase/g, pascalCaseName)
         .replace(/\$CamelCase/g, camelCaseName)
         .replace(/\$Name/g, params.value.name)
     }

diff --git a/docs/images/affinity-designer-export-options.png b/docs/images/affinity-designer-export-options.png
diff --git a/docs/public/templates/affinity_designer.aftemplate b/docs/public/templates/affinity_designer.aftemplate
diff --git a/icons/arrow-down-0-1.json b/icons/arrow-down-0-1.json
@@ -8,6 +8,11 @@
     "filter",
     "sort",
     "ascending",
+    "descending",
+    "increasing",
+    "decreasing",
+    "rising",
+    "falling",
     "numerical"
   ],
   "categories": [

diff --git a/icons/arrow-down-1-0.json b/icons/arrow-down-1-0.json
@@ -7,7 +7,12 @@
   "tags": [
     "filter",
     "sort",
+    "ascending",
     "descending",
+    "increasing",
+    "decreasing",
+    "rising",
+    "falling",
     "numerical"
   ],
   "categories": [

diff --git a/icons/arrow-down-a-z.json b/icons/arrow-down-a-z.json
@@ -8,6 +8,11 @@
     "filter",
     "sort",
     "ascending",
+    "descending",
+    "increasing",
+    "decreasing",
+    "rising",
+    "falling",
     "alphabetical"
   ],
   "categories": [

diff --git a/icons/arrow-down-narrow-wide.json b/icons/arrow-down-narrow-wide.json
@@ -6,7 +6,12 @@
   "tags": [
     "filter",
     "sort",
-    "ascending"
+    "ascending",
+    "descending",
+    "increasing",
+    "decreasing",
+    "rising",
+    "falling"
   ],
   "categories": [
     "text",

diff --git a/icons/arrow-down-wide-narrow.json b/icons/arrow-down-wide-narrow.json
@@ -8,7 +8,12 @@
   "tags": [
     "filter",
     "sort",
-    "descending"
+    "ascending",
+    "descending",
+    "increasing",
+    "decreasing",
+    "rising",
+    "falling"
   ],
   "categories": [
     "text",

diff --git a/icons/arrow-down-z-a.json b/icons/arrow-down-z-a.json
@@ -7,7 +7,12 @@
   "tags": [
     "filter",
     "sort",
+    "ascending",
     "descending",
+    "increasing",
+    "decreasing",
+    "rising",
+    "falling",
     "alphabetical",
     "reverse"
   ],

diff --git a/icons/arrow-up-0-1.json b/icons/arrow-up-0-1.json
@@ -8,6 +8,11 @@
     "filter",
     "sort",
     "ascending",
+    "descending",
+    "increasing",
+    "decreasing",
+    "rising",
+    "falling",
     "numerical"
   ],
   "categories": [

diff --git a/icons/arrow-up-1-0.json b/icons/arrow-up-1-0.json
@@ -7,7 +7,12 @@
   "tags": [
     "filter",
     "sort",
+    "ascending",
     "descending",
+    "increasing",
+    "decreasing",
+    "rising",
+    "falling",
     "numerical"
   ],
   "categories": [

diff --git a/icons/arrow-up-a-z.json b/icons/arrow-up-a-z.json
@@ -8,6 +8,11 @@
     "filter",
     "sort",
     "ascending",
+    "descending",
+    "increasing",
+    "decreasing",
+    "rising",
+    "falling",
     "alphabetical"
   ],
   "categories": [

diff --git a/icons/arrow-up-narrow-wide.json b/icons/arrow-up-narrow-wide.json
@@ -9,7 +9,12 @@
   "tags": [
     "filter",
     "sort",
-    "ascending"
+    "ascending",
+    "descending",
+    "increasing",
+    "decreasing",
+    "rising",
+    "falling"
   ],
   "categories": [
     "text",

diff --git a/icons/arrow-up-wide-narrow.json b/icons/arrow-up-wide-narrow.json
@@ -6,7 +6,12 @@
   "tags": [
     "filter",
     "sort",
-    "descending"
+    "ascending",
+    "descending",
+    "increasing",
+    "decreasing",
+    "rising",
+    "falling"
   ],
   "categories": [
     "text",

diff --git a/icons/arrow-up-z-a.json b/icons/arrow-up-z-a.json
@@ -7,7 +7,12 @@
   "tags": [
     "filter",
     "sort",
+    "ascending",
     "descending",
+    "increasing",
+    "decreasing",
+    "rising",
+    "falling",
     "alphabetical",
     "reverse"
   ],

diff --git a/icons/bar-chart-horizontal-big.svg b/icons/bar-chart-horizontal-big.svg