Init setup commit lint

* fix(icons): adds extra tags to utensils icons

* feat(icons): add aliases to utensils

---------

Co-authored-by: Karsa <karsa@sztaki.hu>
Co-authored-by: Eric Fennis <eric.fennis@gmail.com>

.eslintrc.js

@@ -1,4 +1,4 @@
-const DEFAULT_ATTRS = require('./scripts/render/default-attrs.json');
+const DEFAULT_ATTRS = require('./tools/build-icons/render/default-attrs.json');
 
 module.exports = {
   root: true,
@@ -15,7 +15,9 @@ module.exports = {
     'no-use-before-define': 'off',
     'import/no-extraneous-dependencies': [
       'error',
-      { devDependencies: ['**/*.test.js', '**/*.spec.js', './scripts/**'] },
+      {
+        devDependencies: ['**/*.test.js', '**/*.spec.js', '**/scripts/**'],
+      },
     ],
     'import/extensions': [
       'error',

.github/workflows/pull-request-title.yml

@@ -0,0 +1,16 @@
+name: Validate PR title
+
+on:
+  pull_request:
+    types:
+      - opened
+      - edited
+      - synchronize
+
+jobs:
+  semantic-pull-request:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: amannn/action-semantic-pull-request@v5
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/pull-request.yml

@@ -3,7 +3,7 @@ name: Add Changed Icons comment
 on:
   pull_request_target:
     paths:
-      - 'icons/*.svg'
+      - 'icons/*'
     branches:
       - main
       - fix-icon-preview
@@ -76,7 +76,7 @@ jobs:
     steps:
       - uses: actions/checkout@v4
       - name: Check Uniqueness of Aliases
-        run: ! cat <(printf "%s\\n" icons/*.json | while read -r name; do basename "$name" .json; done) <(jq -cr 'select(.aliases) | .aliases[] | if type=="string" then . else .name end' icons/*.json) | sort | uniq -c | grep -ve '^   1 '
+        run: "! cat <(printf \"%s\\n\" icons/*.json | while read -r name; do basename \"$name\" .json; done) <(jq -cr 'select(.aliases) | .aliases[] | if type==\"string\" then . else .name end' icons/*.json) | sort | uniq -c | grep -ve '^\\s*1 '"
 
   generate-changed-icons-comment:
     runs-on: ubuntu-latest

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.

categories/home.json

@@ -1,5 +1,5 @@
 {
   "$schema": "../category.schema.json",
   "title": "Home",
-  "icon": "home"
+  "icon": "house"
 }

commitlint.config.ts

@@ -0,0 +1,28 @@
+import type { UserConfig } from '@commitlint/types';
+import fs from 'fs/promises'
+import path from 'path'
+
+// Read directory
+const getAllPackageFromDirectory = async (directory: string) => {
+  return fs.readdir(path.resolve(process.cwd(), directory))
+}
+
+const Configuration: UserConfig = {
+  extends: ['@commitlint/config-conventional'],
+  rules: {
+    'scope-enum': async () => {
+      const packages = await getAllPackageFromDirectory('packages')
+      const toolPackages = await getAllPackageFromDirectory('tools')
+
+      return [2, 'always', [
+          'site',
+          'meta',
+          ...packages,
+          ...toolPackages,
+        ]
+      ]
+    }
+  },
+};
+
+export default Configuration;

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(

docs/.vitepress/config.ts

@@ -28,6 +28,10 @@ export default defineConfig({
             new URL('./theme/components/overrides/VPFooter.vue', import.meta.url),
           ),
         },
+        {
+          find: '~/.vitepress',
+          replacement: fileURLToPath(new URL('./', import.meta.url)),
+        },
       ],
     },
   },

docs/.vitepress/data/categoriesData.json

@@ -0,0 +1,186 @@
+[
+  {
+    "name": "accessibility",
+    "title": "Accessibility"
+  },
+  {
+    "name": "account",
+    "title": "Accounts & access"
+  },
+  {
+    "name": "animals",
+    "title": "Animals"
+  },
+  {
+    "name": "arrows",
+    "title": "Arrows"
+  },
+  {
+    "name": "brands",
+    "title": "Brands"
+  },
+  {
+    "name": "buildings",
+    "title": "Buildings"
+  },
+  {
+    "name": "charts",
+    "title": "Charts"
+  },
+  {
+    "name": "communication",
+    "title": "Communication"
+  },
+  {
+    "name": "connectivity",
+    "title": "Connectivity"
+  },
+  {
+    "name": "currency",
+    "title": "Currency"
+  },
+  {
+    "name": "cursors",
+    "title": "Cursors"
+  },
+  {
+    "name": "design",
+    "title": "Design"
+  },
+  {
+    "name": "development",
+    "title": "Coding & development"
+  },
+  {
+    "name": "devices",
+    "title": "Devices"
+  },
+  {
+    "name": "emoji",
+    "title": "Emoji"
+  },
+  {
+    "name": "files",
+    "title": "File icons"
+  },
+  {
+    "name": "food-beverage",
+    "title": "Food & beverage"
+  },
+  {
+    "name": "furniture",
+    "title": "Furniture"
+  },
+  {
+    "name": "gaming",
+    "title": "Gaming"
+  },
+  {
+    "name": "home",
+    "title": "Home"
+  },
+  {
+    "name": "layout",
+    "title": "Layout"
+  },
+  {
+    "name": "mail",
+    "title": "Mail"
+  },
+  {
+    "name": "maps",
+    "title": "Maps"
+  },
+  {
+    "name": "maths",
+    "title": "Maths"
+  },
+  {
+    "name": "medical",
+    "title": "Medical"
+  },
+  {
+    "name": "money",
+    "title": "Money"
+  },
+  {
+    "name": "multimedia",
+    "title": "Multimedia"
+  },
+  {
+    "name": "nature",
+    "title": "Nature"
+  },
+  {
+    "name": "navigation",
+    "title": "Navigation"
+  },
+  {
+    "name": "notifications",
+    "title": "Notifications"
+  },
+  {
+    "name": "people",
+    "title": "People"
+  },
+  {
+    "name": "photography",
+    "title": "Photography"
+  },
+  {
+    "name": "science",
+    "title": "Science"
+  },
+  {
+    "name": "seasons",
+    "title": "Seasons"
+  },
+  {
+    "name": "security",
+    "title": "Security"
+  },
+  {
+    "name": "shapes",
+    "title": "Shapes"
+  },
+  {
+    "name": "shopping",
+    "title": "Shopping"
+  },
+  {
+    "name": "social",
+    "title": "Social"
+  },
+  {
+    "name": "sports",
+    "title": "Sports"
+  },
+  {
+    "name": "sustainability",
+    "title": "Sustainability"
+  },
+  {
+    "name": "text",
+    "title": "Text formatting"
+  },
+  {
+    "name": "time",
+    "title": "Time & calendar"
+  },
+  {
+    "name": "tools",
+    "title": "Tools"
+  },
+  {
+    "name": "transportation",
+    "title": "Transportation"
+  },
+  {
+    "name": "travel",
+    "title": "Travel"
+  },
+  {
+    "name": "weather",
+    "title": "Weather"
+  }
+]

docs/.vitepress/data/packageData.json

@@ -158,16 +158,5 @@
         "href": "https://www.npmjs.com/package/lucide-static"
       }
     ]
-  },
-  "lucide-flutter": {
-    "order": 9,
-    "icon": "flutter",
-    "shields": [
-      {
-        "alt": "flutter",
-        "src": "https://img.shields.io/pub/v/lucide_icons",
-        "href": "https://img.shields.io/pub/v/lucide_icons"
-      }
-    ]
   }
 }

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}
-        />
-        <g
-          strokeWidth={1.75}
-          dangerouslySetInnerHTML={{ __html: backdropString }}
-        />
-      </mask>
-      <g
-        strokeWidth={2.25}
-        stroke="url(#pattern)"
-        mask={'url(#svg-preview-backdrop-mask-outline)'}
       >
         <rect
           x="0"
           y="0"
           width="24"
           height="24"
-          fill="url(#pattern)"
-          opacity={0.5}
+          fill="#fff"
           stroke="none"
         />
+        <g
+          strokeWidth={1.75}
+          dangerouslySetInnerHTML={{ __html: backdropString }}
+        />
+      </mask>
+      <g mask={`url(#svg-preview-backdrop-mask-${id})`}>
+        <rect
+          x="0"
+          y="0"
+          width="24"
+          height="24"
+          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)'}
-      />
     </>
   );
 };

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"

docs/.vitepress/lib/codeExamples/createCodeExamples.ts

@@ -10,18 +10,24 @@ type CodeExampleType = {
 const getIconCodes = (): CodeExampleType => {
   return [
     {
-      language: 'html',
-      title: 'HTML',
-      code: `<i data-lucide="Name"></i>`,
+      language: 'js',
+      title: 'Vanilla',
+      code: `\
+import { createIcons, icons } from 'lucide';
+
+createIcons({ icons });
+
+document.body.append('<i data-lucide="$Name"></i>');\
+  `,
     },
     {
       language: 'tsx',
       title: 'React',
-      code: `import { PascalCase } from 'lucide-react';
+      code: `import { $PascalCase } from 'lucide-react';
 
 const App = () => {
   return (
-    <PascalCase />
+    <$PascalCase />
   );
 };
 
@@ -32,11 +38,11 @@ export default App;
       language: 'vue',
       title: 'Vue',
       code: `<script setup>
-  import { PascalCase } from 'lucide-vue-next';
+import { $PascalCase } from 'lucide-vue-next';
 </script>
 
 <template>
-  <PascalCase />
+  <$PascalCase />
 </template>
 `,
     },
@@ -44,20 +50,20 @@ export default App;
       language: 'svelte',
       title: 'Svelte',
       code: `<script>
-import { PascalCase } from 'lucide-svelte';
+import { $PascalCase } from 'lucide-svelte';
 </script>
 
-<PascalCase />
+<$PascalCase />
 `,
     },
     {
       language: 'tsx',
       title: 'Preact',
-      code: `import { PascalCase } from 'lucide-preact';
+      code: `import { $PascalCase } from 'lucide-preact';
 
 const App = () => {
   return (
-    <PascalCase />
+    <$PascalCase />
   );
 };
 
@@ -67,11 +73,11 @@ export default App;
     {
       language: 'tsx',
       title: 'Solid',
-      code: `import { PascalCase } from 'lucide-solid';
+      code: `import { $PascalCase } from 'lucide-solid';
 
 const App = () => {
   return (
-    <PascalCase />
+    <$PascalCase />
   );
 };
 
@@ -82,16 +88,16 @@ export default App;
       language: 'tsx',
       title: 'Angular',
       code: `// app.module.ts
-import { LucideAngularModule, PascalCase } from 'lucide-angular';
+import { LucideAngularModule, $PascalCase } from 'lucide-angular';
 
 @NgModule({
   imports: [
-    LucideAngularModule.pick({ PascalCase })
+    LucideAngularModule.pick({ $PascalCase })
   ],
 })
 
 // app.component.html
-<lucide-icon name="Name"></lucide-icon>
+<lucide-icon name="$Name"></lucide-icon>
 `,
     },
     {
@@ -101,7 +107,7 @@ import { LucideAngularModule, PascalCase } from 'lucide-angular';
 @import ('~lucide-static/font/Lucide.css');
 </style>
 
-<div class="icon-Name"></div>
+<div class="icon-$Name"></div>
 `,
     },
   ];

docs/.vitepress/lib/codeExamples/createLabCodeExamples.ts

@@ -0,0 +1,161 @@
+import { bundledLanguages, type ThemeRegistration } from 'shikiji';
+import { getHighlighter } from 'shikiji';
+
+type CodeExampleType = {
+  title: string;
+  language: string;
+  code: string;
+}[];
+
+const getIconCodes = (): CodeExampleType => {
+  return [
+    {
+      language: 'js',
+      title: 'Vanilla',
+      code: `\
+import { createIcons, icons } from 'lucide';
+import { $CamelCase } from '@lucide/lab';
+
+createIcons({
+  icons: {
+    $CamelCase
+  }
+});
+
+document.body.append('<i data-lucide="$Name"></i>');\
+  `,
+    },
+    {
+      language: 'tsx',
+      title: 'React',
+      code: `import { Icon } from 'lucide-react';
+import { $CamelCase } from '@lucide/lab';
+
+const App = () => {
+  return (
+    <Icon iconNode={$CamelCase} />
+  );
+};
+
+export default App;
+`,
+    },
+    {
+      language: 'vue',
+      title: 'Vue',
+      code: `<script setup>
+import { Icon } from 'lucide-vue-next';
+import { $CamelCase } from '@lucide/lab';
+</script>
+
+<template>
+  <Icon :iconNode="burger" />
+</template>
+`,
+    },
+    {
+      language: 'svelte',
+      title: 'Svelte',
+      code: `<script>
+import { Icon } from 'lucide-svelte';
+import { $CamelCase } from '@lucide/lab';
+</script>
+
+<Icon iconNode={burger} />
+`,
+    },
+    {
+      language: 'tsx',
+      title: 'Preact',
+      code: `import { Icon } from 'lucide-preact';
+import { $CamelCase } from '@lucide/lab';
+
+const App = () => {
+  return (
+    <Icon iconNode={$CamelCase} />
+  );
+};
+
+export default App;
+`,
+    },
+    {
+      language: 'tsx',
+      title: 'Solid',
+      code: `import { Icon } from 'lucide-solid';
+import { $CamelCase } from '@lucide/lab';
+
+const App = () => {
+  return (
+    <Icon iconNode={$CamelCase} />
+  );
+};
+
+export default App;
+`,
+    },
+    {
+      language: 'tsx',
+      title: 'Angular',
+      code: `// app.module.ts
+import { LucideAngularModule } from 'lucide-angular';
+import { $CamelCase } from '@lucide/lab';
+
+@NgModule({
+  imports: [
+    LucideAngularModule.pick({ $CamelCase })
+  ],
+})
+
+// app.component.html
+<lucide-icon name="$CamelCase"></lucide-icon>
+`,
+    },
+  ];
+};
+
+export type ThemeOptions =
+  | ThemeRegistration
+  | { light: ThemeRegistration; dark: ThemeRegistration };
+
+const highLightCode = async (code: string, lang: string, active?: boolean) => {
+  const highlighter = await getHighlighter({
+    themes: ['github-light', 'github-dark'],
+    langs: Object.keys(bundledLanguages),
+  });
+
+  const highlightedCode = highlighter
+    .codeToHtml(code, {
+      lang,
+      themes: {
+        light: 'github-light',
+        dark: 'github-dark',
+      },
+      defaultColor: false,
+    })
+    .replace('shiki-themes', 'shiki-themes vp-code');
+
+  return `<div class="language-${lang} ${active ? 'active' : ''}">
+  <button title="Copy Code" class="copy"></button>
+  <span class="lang">${lang}</span>
+  ${highlightedCode}
+  </div>`;
+};
+
+export default async function createCodeExamples() {
+  const codes = getIconCodes();
+
+  const codeExamplePromises = codes.map(async ({ title, language, code }, index) => {
+    const isFirst = index === 0;
+
+    const codeString = await highLightCode(code, language, isFirst);
+
+    return {
+      title,
+      language: language,
+      code: codeString,
+    };
+  });
+
+  return Promise.all(codeExamplePromises);
+}

docs/.vitepress/lib/codeExamples/highLightCode.ts

@@ -0,0 +1,32 @@
+import { bundledLanguages, type ThemeRegistration } from 'shikiji';
+import { getHighlighter } from 'shikiji';
+
+export type ThemeOptions =
+  | ThemeRegistration
+  | { light: ThemeRegistration; dark: ThemeRegistration };
+
+const highLightCode = async (code: string, lang: string, active?: boolean) => {
+  const highlighter = await getHighlighter({
+    themes: ['github-light', 'github-dark'],
+    langs: Object.keys(bundledLanguages),
+  });
+
+  const highlightedCode = highlighter
+    .codeToHtml(code, {
+      lang,
+      themes: {
+        light: 'github-light',
+        dark: 'github-dark',
+      },
+      defaultColor: false,
+    })
+    .replace('shiki-themes', 'shiki-themes vp-code');
+
+  return `<div class="language-${lang} ${active ? 'active' : ''}">
+  <button title="Copy Code" class="copy"></button>
+  <span class="lang">${lang}</span>
+  ${highlightedCode}
+  </div>`;
+};
+
+export default highLightCode;

docs/.vitepress/lib/codeExamples/types.ts

@@ -0,0 +1,5 @@
+export type CodeExampleType = {
+  title: string;
+  language: string;
+  code: string;
+}[];

docs/.vitepress/lib/fetchPackages.ts

@@ -1,6 +1,5 @@
 import { promises as fs, constants } from 'fs';
 import path from 'path';
-import yaml from 'js-yaml';
 import { PackageItem } from '../theme/types';
 
 const fileExist = (filePath) =>
@@ -27,11 +26,6 @@ const fetchPackages = async (): Promise<PackageItem[]> => {
         return JSON.parse(await fs.readFile(jsonFilePath, 'utf-8'));
       }
 
-      const ymlFilePath = path.resolve(filePath, 'pubspec.yaml');
-      if (await fileExist(ymlFilePath)) {
-        return yaml.load(await fs.readFile(ymlFilePath, 'utf-8'));
-      }
-
       return null;
     }),
   );

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',
+        },
       ],
     },
   ],

docs/.vitepress/theme/components/base/Checkbox.vue

@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+const props = defineProps<{
+  label: string
+  id: string
+  value: string
+  modelValue: string | string[]
+}>()
+
+const emit = defineEmits(['change', 'input', 'update:modelValue'])
+
+const model = computed({
+  get: () => {
+    if (Array.isArray(props.modelValue)) {
+      return props.modelValue.includes(props.value)
+    }
+    return props.modelValue === props.value
+
+  },
+  set: (value: string) => {
+    if (Array.isArray(props.modelValue)) {
+      const newValue = [...props.modelValue]
+      const index = newValue.indexOf(props.value)
+      if (value) {
+        if (index === -1) {
+          newValue.push(props.value)
+        }
+      } else {
+        if (index !== -1) {
+          newValue.splice(index, 1)
+        }
+      }
+      emit('update:modelValue', newValue)
+    } else {
+      emit('update:modelValue', value)
+    }
+  }
+})
+</script>
+
+<template>
+  <div class="checkbox-wrapper">
+    <input
+      type="checkbox"
+      class="checkbox"
+      ref="input"
+      :id="id"
+      v-model="model"
+      v-bind="$attrs"
+    />
+    <label :for="id" class="checkbox-label">
+      {{ label }}
+    </label>
+  </div>
+</template>
+
+<style scoped>
+.checkbox-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.checkbox-label {
+  line-height: 20px;
+  font-size: 13px;
+  color: var(--vt-c-text-1);
+  transition: color .5s;
+  display: block;
+}
+
+.checkbox {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 16px;
+  height: 16px;
+  cursor: pointer;
+  border: 1px solid var(--vp-input-border-color);
+  background-color: var(--vp-input-switch-bg-color);
+  border-radius: 4px;
+}
+
+.checkbox:checked {
+  border-color: transparent;
+    background: url("data:image/svg+xml,%3Csvg width='12px' height='12px' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")
+      center no-repeat var(--vp-c-brand);;
+}
+
+</style>

docs/.vitepress/theme/components/home/TeamMemberCard.vue

@@ -3,7 +3,7 @@ export interface TeamMember {
   name: string
   title: string
   image: string
-  sponsor: string
+  sponsor?: string
   socialLinks: DefaultTheme.SocialLink[]
 }
 </script>

docs/.vitepress/theme/components/icons/CategoryList.vue

@@ -6,6 +6,7 @@ import { isActive } from 'vitepress/dist/client/shared'
 import { useActiveAnchor } from '../../composables/useActiveAnchor'
 import { data } from './CategoryList.data'
 import CategoryListItem from './CategoryListItem.vue'
+import SidebarTitle from './SidebarTitle.vue'
 import { useCategoryView } from '../../composables/useCategoryView'
 
 const { page } = useData()
@@ -46,10 +47,13 @@ watch(headers, () => {
 
 <template>
   <div class="category-list" ref="container">
-    <VPLink class="sidebar-title" href="/icons/" :class="{ 'active': overviewIsActive } ">
+    <SidebarTitle>
+      View
+    </SidebarTitle>
+    <VPLink class="sidebar-link sidebar-text" href="/icons/" :class="{ 'active': overviewIsActive } ">
       All
     </VPLink>
-    <VPLink class="sidebar-title" href="/icons/categories" :class="{ 'active': categoriesIsActive } ">
+    <VPLink class="sidebar-link sidebar-text" href="/icons/categories" :class="{ 'active': categoriesIsActive } ">
       Categories
     </VPLink>
     <div class="content">
@@ -62,17 +66,20 @@ watch(headers, () => {
 </template>
 
 <style scoped>
-.sidebar-title {
-  font-weight: 500;
-  color: var(--vp-c-text-2);
-  margin-bottom: 6px;
+.sidebar-text {
   line-height: 24px;
   font-size: 14px;
   display: block;
   transition: color 0.25s;
+  padding: 4px 0;
 }
 
-.sidebar-title:hover, .sidebar-title.active {
+.sidebar-link {
+  font-weight: 500;
+  color: var(--vp-c-text-2);
+}
+
+.sidebar-link:hover, .sidebar-link.active {
   color: var(--vp-c-brand);
 }
 .content {

docs/.vitepress/theme/components/icons/IconDetailOverlay.vue

@@ -11,19 +11,30 @@ import IconInfo from './IconInfo.vue';
 import Badge from '../base/Badge.vue';
 import { computedAsync } from '@vueuse/core';
 import { satisfies } from 'semver';
+import { useExternalLibs } from '../../composables/useExternalLibs';
 
 const props = defineProps<{
   iconName: string | null
 }>()
 
+const { externalIconNodes } = useExternalLibs()
+
 const { go } = useRouter()
 
 const icon = computedAsync<IconEntity | null>(async () => {
   if (props.iconName) {
     try {
-      return (await import(`../../../data/iconDetails/${props.iconName}.ts`)).default as IconEntity
+      if (props.iconName.includes(':')) {
+        const [library, name] = props.iconName.split(':')
+
+        return externalIconNodes.value[library].find((icon) => icon.name === name)
+      } else {
+        return (await import(`../../../data/iconDetails/${props.iconName}.ts`)).default as IconEntity
+      }
     } catch (err) {
-      go(`/icons/${props.iconName}`)
+      if (!props.iconName.includes(':')) {
+        go(`/icons/${props.iconName}`)
+      }
     }
   }
   return null
@@ -56,7 +67,7 @@ const Expand = createLucideIcon('Expand', expand)
             class="version"
             :href="releaseTagLink(icon.createdRelease.version)"
           >v{{ icon.createdRelease.version }}</Badge>
-          <IconButton  @click="go(`/icons/${icon.name}`)">
+          <IconButton  @click="go(icon.externalLibrary ? `/icons/${icon.externalLibrary}/${icon.name}` : `/icons/${icon.name}`)">
             <component :is="Expand" />
           </IconButton>
           <IconButton  @click="onClose">

docs/.vitepress/theme/components/icons/IconGrid.vue

@@ -25,8 +25,10 @@ function setActiveIcon(name: string) {
       :key="icon.name"
     >
       <IconItem
-        v-bind="icon"
-        @setActiveIcon="setActiveIcon(icon.name)"
+        :iconNode="icon.iconNode"
+        :name="icon.name"
+        :externalLibrary="icon.externalLibrary"
+        @setActiveIcon="setActiveIcon"
         :active="activeIcon === icon.name"
         customizable
         :overlayMode="overlayMode"

docs/.vitepress/theme/components/icons/IconInfo.vue

@@ -7,6 +7,8 @@ import CopyCodeButton from './CopyCodeButton.vue';
 import VPButton from 'vitepress/dist/client/theme-default/components/VPButton.vue';
 import {useData, useRouter} from 'vitepress';
 import { computed } from 'vue';
+import createLucideIcon from 'lucide-vue-next/src/createLucideIcon';
+import { diamond }  from '../../../data/iconNodes'
 
 const props = defineProps<{
   icon: IconEntity
@@ -20,13 +22,21 @@ const tags = computed(() => {
   if (!props.icon || !props?.icon?.tags) return []
   return props.icon.tags.join(' • ')
 })
+
+const DiamondIcon = createLucideIcon('Diamond', diamond)
 </script>
 
 <template>
   <div class="icon-info">
-    <IconDetailName class="icon-name">
-      {{ icon.name }}
-    </IconDetailName>
+    <div class="icon-name-wrapper">
+      <IconDetailName class="icon-name">
+        {{ icon.name }}
+      </IconDetailName>
+      <div v-if="icon.externalLibrary" class="icon-external-lib">
+        <DiamondIcon fill="currentColor" :size="12"/>
+        {{ icon.externalLibrary }}
+      </div>
+    </div>
     <div class="tags-scroller" v-if="tags.length">
       <p class="icon-tags horizontal-scroller">
         {{ tags }}
@@ -44,10 +54,10 @@ const tags = computed(() => {
 
     <div class="group buttons">
       <VPButton
-        v-if="!page?.relativePath?.startsWith?.(`icons/${icon.name}`)"
-        :href="`/icons/${icon.name}`"
+        v-if="!page?.relativePath?.startsWith?.(icon.externalLibrary ? `icons/${icon.externalLibrary}/${icon.name}`: `icons/${icon.name}`)"
+        :href="icon.externalLibrary ? `/icons/${icon.externalLibrary}/${icon.name}`: `/icons/${icon.name}`"
         text="See in action"
-        @click="go(`/icons/${icon.name}`)"
+        @click="go(icon.externalLibrary ? `/icons/${icon.externalLibrary}/${icon.name}`: `/icons/${icon.name}`)"
       />
       <CopySVGButton :name="icon.name" :popoverPosition="popoverPosition"/>
       <CopyCodeButton :name="icon.name" :popoverPosition="popoverPosition"/>
@@ -67,9 +77,27 @@ const tags = computed(() => {
   text-transform: capitalize;
 }
 .icon-name {
+  margin-right: -36px;
+}
+
+.icon-name-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 2px;
   margin-bottom: 4px;
 }
 
+.icon-external-lib {
+  color: var(--vp-c-brand-dark);
+  padding: 4px 12px;
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 28px;
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
 .icon-tags {
   font-size: 16px;
   color: var(--vp-c-text-2);

docs/.vitepress/theme/components/icons/IconItem.vue

@@ -6,6 +6,7 @@ import { useRouter } from 'vitepress';
 import getSVGIcon from '../../utils/getSVGIcon';
 import useConfetti from '../../composables/useConfetti';
 import Tooltip from '../base/Tooltip.vue';
+import { diamond }  from '../../../data/iconNodes'
 
 const downloadText = 'Download!'
 const copiedText = 'Copied!'
@@ -16,6 +17,7 @@ const props = defineProps<{
   name: string;
   iconNode: IconNode;
   active: boolean;
+  externalLibrary?: string;
   customizable?: boolean;
   overlayMode?: boolean
   hideIcon?: boolean
@@ -33,8 +35,9 @@ const icon = computed(() => {
   return createLucideIcon(props.name, props.iconNode)
 })
 
-async function navigateToIcon(event) {
+const href = computed(() => props.externalLibrary ? `/icons/${props.externalLibrary}/${props.name}` : `/icons/${props.name}`)
 
+async function navigateToIcon(event) {
   if (event.shiftKey) {
     event.preventDefault()
     const svgString = getSVGIcon(event.target.firstChild, {
@@ -50,13 +53,16 @@ async function navigateToIcon(event) {
 
   if(props.overlayMode && showOverlay.value) {
     event.preventDefault()
-    window.history.pushState({}, '', `/icons/${props.name}`)
-    emit('setActiveIcon', props.name)
+
+    window.history.pushState({}, '', props.externalLibrary ? `/icons/${props.externalLibrary}/${props.name}` : `/icons/${props.name}`)
+    emit('setActiveIcon', props.externalLibrary ? `${props.externalLibrary}:${props.name}`: props.name)
   } else {
     event.preventDefault()
-    go(`/icons/${props.name}`)
+    go(props.externalLibrary ? `/icons/${props.externalLibrary}/${props.name}` : `/icons/${props.name}`)
   }
 }
+
+const DiamondIcon = createLucideIcon('Diamond', diamond)
 </script>
 
 <template>
@@ -66,7 +72,7 @@ async function navigateToIcon(event) {
       @click="navigateToIcon"
       :class="{ active, animate }"
       :aria-label="name"
-      :href="`/icons/${props.name}`"
+
       :data-confetti-text="confettiText"
       ref="ref"
     >
@@ -80,6 +86,13 @@ async function navigateToIcon(event) {
           }"
         />
       </KeepAlive>
+      <div
+        v-if="externalLibrary"
+        class="floating-diamond"
+        aria-hidden="true"
+      >
+        <DiamondIcon fill="currentColor" :size="8"/>
+      </div>
     </a>
   </Tooltip>
 </template>
@@ -88,6 +101,7 @@ async function navigateToIcon(event) {
 
 <style scoped>
 .icon-button {
+  position: relative;
   display: inline-block;
   border: 1px solid transparent;
   text-align: center;
@@ -104,6 +118,13 @@ async function navigateToIcon(event) {
   color: var(--vp-c-text-1);
 }
 
+.floating-diamond {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  color: var(--vp-c-brand);
+}
+
 .confetti-button:before,
 .confetti-button:after {
   z-index: 100;

docs/.vitepress/theme/components/icons/IconsCategory.vue

@@ -19,7 +19,7 @@ export type CategoryRow = CategoryNameRow | CategoryIconsRow;
 import IconGrid from './IconGrid.vue'
 
 defineProps<{
-  activeIconName: string
+  activeIconName: string | null
   categoryRow: CategoryRow
 }>()
 

docs/.vitepress/theme/components/icons/IconsCategoryOverview.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed, defineAsyncComponent, onMounted } from 'vue';
+import { ref, computed, defineAsyncComponent, onMounted, watch, watchEffect } from 'vue';
 import type { IconEntity, Category } from '../../types';
 import useSearch from '../../composables/useSearch';
 import InputSearch from '../base/InputSearch.vue';
@@ -69,7 +69,7 @@ const categories = computed(() => {
   return props.categories
     .map(({ name, title }) => {
       const categoryIcons = props.icons.filter((icon) => {
-        const iconCategories = props.iconCategories[icon.name];
+        const iconCategories = icon?.externalLibrary ? icon.categories : props.iconCategories[icon.name]
 
         return iconCategories?.includes(name);
       });
@@ -140,6 +140,12 @@ function handleCloseDrawer() {
 
   window.history.pushState({}, '', '/icons/categories');
 }
+
+watchEffect(() => {
+
+  console.log(props.icons.find((icon) => icon.name === 'burger'));
+
+});
 </script>
 
 <template>

docs/.vitepress/theme/components/icons/SidebarExternalLibrarySelect.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import Checkbox from '../base/Checkbox.vue'
+import SidebarTitle from './SidebarTitle.vue'
+import { useExternalLibs } from '../../composables/useExternalLibs';
+import { ExternalLibs } from '../../types';
+
+interface ExternalLibrary {
+  name: string;
+  value: ExternalLibs;
+}
+
+const externalLibraries: ExternalLibrary[] = [
+  {
+    name: 'Lab',
+    value: 'lab'
+  },
+];
+
+const { selectedLibs } = useExternalLibs();
+</script>
+
+<template>
+  <div class="external-library-select">
+    <SidebarTitle>
+      Include external libs
+    </SidebarTitle>
+    <ul>
+      <li
+        v-for="library in externalLibraries"
+        :key="library.name"
+      >
+        <Checkbox
+          :label="library.name"
+          :id="library.name"
+          v-model="selectedLibs"
+          :value="library.value"
+        />
+      </li>
+    </ul>
+  </div>
+</template>
+
+<style scoped>
+.external-library-select {
+  margin-bottom: 24px;
+}
+</style>

docs/.vitepress/theme/components/icons/SidebarTitle.vue

@@ -0,0 +1,19 @@
+<template>
+  <h2 class="sidebar-title sidebar-text">
+    <slot />
+  </h2>
+</template>
+
+<style scoped>
+.sidebar-title {
+  font-weight: 700;
+  color: var(--vp-c-text-1);
+}
+.sidebar-text {
+  line-height: 24px;
+  font-size: 14px;
+  display: block;
+  transition: color 0.25s;
+  padding: 4px 0;
+}
+</style>

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',

docs/.vitepress/theme/components/packages/PackageList.data.ts

@@ -5,9 +5,10 @@ import fetchPackages from '../../../lib/fetchPackages';
 export default {
   async load() {
     const packages = await fetchPackages();
+
     return {
       packages: packages
-        .filter((p) => p.name in packageData)
+        .filter((p) => p?.name != null && p.name in packageData)
         .map((pData) => ({
           ...pData,
           ...packageData[pData.name],

docs/.vitepress/theme/components/packages/PackageList.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import { data } from './PackageList.data'
 import GridSection from '../base/GridSection.vue'
-import PackageListItem from "./PackageListItem.vue";</script>
+import PackageListItem from "./PackageListItem.vue";
+</script>
 
 <template>
   <GridSection

docs/.vitepress/theme/components/packages/PackageListItem.vue

@@ -19,7 +19,7 @@ const props = defineProps<{
           <img v-if="packageData.iconDark" :src="packageData.iconDark" alt="" class="package-icon dark" :class="packageData.iconClass" />
         </div>
         <div class="package-title">
-          <h2 class="title">{{ props.packageData.name }}</h2>
+          <h2 class="title">{{ props.packageData?.name }}</h2>
           <a v-for="shield in props.packageData.shields" :href="shield.href" class="package-shield" rel="noreferrer noopener">
             <img :src="shield.src" :alt="shield.href" />
           </a>

docs/.vitepress/theme/composables/useExternalLibs.ts

@@ -0,0 +1,57 @@
+import { ref, inject, Ref, watch } from 'vue';
+import { ExternalLibs, IconEntity } from '../types';
+
+export const EXTERNAL_LIBS_CONTEXT = Symbol('externalLibs');
+
+type ExternalIconNodes = Partial<Record<ExternalLibs, IconEntity[]>>;
+
+interface ExternalLibContext {
+  selectedLibs: Ref<[ExternalLibs]>;
+  externalIconNodes: Ref<ExternalIconNodes>;
+}
+
+export const externalLibContext = {
+  selectedLibs: ref([]),
+  externalIconNodes: ref({}),
+};
+
+const externalLibIconNodesAPI = {
+  lab: 'https://lab.lucide.dev/api/icon-details',
+};
+
+export function useExternalLibs(): ExternalLibContext {
+  const context = inject<ExternalLibContext>(EXTERNAL_LIBS_CONTEXT);
+
+  watch(context?.selectedLibs, async (selectedLibs) => {
+    const savedIconNodes = { ...context?.externalIconNodes.value };
+    const newExternalIconNodes: ExternalIconNodes = {};
+
+    try {
+      for (const lib of selectedLibs) {
+        if (savedIconNodes[lib]) {
+          newExternalIconNodes[lib] = savedIconNodes[lib];
+        } else {
+          const response = await fetch(externalLibIconNodesAPI[lib]);
+          const iconNodes = await response.json();
+
+          if (iconNodes) {
+            newExternalIconNodes[lib] = Object.values(iconNodes).map((iconEntity: IconEntity) => ({
+              ...iconEntity,
+              externalLibrary: lib,
+            }));
+          }
+        }
+      }
+
+      context.externalIconNodes.value = newExternalIconNodes;
+    } catch (error) {
+      console.error(error);
+    }
+  });
+
+  if (!context) {
+    throw new Error('useExternalLibs must be used with externalLibs context');
+  }
+
+  return context;
+}

docs/.vitepress/theme/composables/useIconsWithExternalLibs.ts

@@ -0,0 +1,29 @@
+import { computed } from 'vue';
+import { useExternalLibs } from '~/.vitepress/theme/composables/useExternalLibs';
+import { IconEntity } from '../types';
+
+const useIconsWithExternalLibs = (initialIcons?: IconEntity[]) => {
+  const { externalIconNodes } = useExternalLibs();
+
+  return computed(() => {
+    let icons = [];
+
+    if (initialIcons) {
+      icons = icons.concat(initialIcons);
+    }
+
+    const externalIconNodesArray = Object.values(externalIconNodes.value);
+
+    if (externalIconNodesArray?.length) {
+      externalIconNodesArray.forEach((iconNodes) => {
+        if (iconNodes?.length) {
+          icons = icons.concat(iconNodes);
+        }
+      });
+    }
+
+    return icons;
+  });
+};
+
+export default useIconsWithExternalLibs;

docs/.vitepress/theme/index.ts

@@ -7,6 +7,7 @@ import HomeHeroIconsCard from './components/home/HomeHeroIconsCard.vue';
 import HomeHeroBefore from './components/home/HomeHeroBefore.vue';
 import { ICON_STYLE_CONTEXT, iconStyleContext } from './composables/useIconStyle';
 import { CATEGORY_VIEW_CONTEXT, categoryViewContext } from './composables/useCategoryView';
+import { EXTERNAL_LIBS_CONTEXT, externalLibContext } from './composables/useExternalLibs';
 
 const theme: Partial<Theme> = {
   extends: DefaultTheme,
@@ -20,6 +21,7 @@ const theme: Partial<Theme> = {
   enhanceApp({ app }) {
     app.provide(ICON_STYLE_CONTEXT, iconStyleContext);
     app.provide(CATEGORY_VIEW_CONTEXT, categoryViewContext);
+    app.provide(EXTERNAL_LIBS_CONTEXT, externalLibContext);
   },
 };
 

docs/.vitepress/theme/layouts/IconsSidebarNavAfter.vue

@@ -3,6 +3,7 @@ import { useData } from 'vitepress'
 
 import CategoryList from '../components/icons/CategoryList.vue'
 import SidebarIconCustomizer from '../components/icons/SidebarIconCustomizer.vue'
+import ExternalLibrarySelect from '../components/icons/SidebarExternalLibrarySelect.vue'
 
 const { page } = useData()
 
@@ -11,6 +12,7 @@ const { page } = useData()
 <template>
   <div>
     <SidebarIconCustomizer v-if="page?.relativePath?.startsWith?.('icons')"/>
+    <ExternalLibrarySelect v-if="page?.relativePath?.startsWith?.('icons')"/>
     <CategoryList v-if="page?.relativePath?.startsWith?.('icons')"/>
   </div>
 </template>

docs/.vitepress/theme/types.ts

@@ -1,13 +1,18 @@
 export type IconNode = [elementName: string, attrs: Record<string, string>][];
 export type IconNodeWithKeys = [elementName: string, attrs: Record<string, string>, key: string][];
 
-export interface IconEntity {
-  name: string;
+export interface IconMetaData {
   tags: string[];
   categories: string[];
   contributors: string[];
   aliases?: string[];
+}
+
+export type ExternalLibs = 'lab';
+export interface IconEntity extends IconMetaData {
+  name: string;
   iconNode: IconNode;
+  externalLibrary?: ExternalLibs;
   createdRelease?: Release;
   changedRelease?: Release;
 }

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`).

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.

docs/guide/packages/lucide-vue-next.md

@@ -87,7 +87,7 @@ import { burger } from '@lucide/lab';
 </script>
 
 <template>
-  <Icon :iconNode={burger} />
+  <Icon :iconNode="burger" />
 </template>
 ```
 

docs/icons/[name].md

@@ -10,14 +10,14 @@ sidebar: true
 <script setup>
 import { computed } from 'vue'
 import { useData } from 'vitepress'
-import IconPreview from '../.vitepress/theme/components/icons/IconPreview.vue'
-import IconPreviewSmall from '../.vitepress/theme/components/icons/IconPreviewSmall.vue'
-import IconInfo from '../.vitepress/theme/components/icons/IconInfo.vue'
-import IconContributors from '../.vitepress/theme/components/icons/IconContributors.vue'
-import RelatedIcons from '../.vitepress/theme/components/icons/RelatedIcons.vue'
-import CodeGroup from '../.vitepress/theme/components/base/CodeGroup.vue'
-import Badge from '../.vitepress/theme/components/base/Badge.vue'
-import Label from '../.vitepress/theme/components/base/Label.vue'
+import IconPreview from '~/.vitepress/theme/components/icons/IconPreview.vue'
+import IconPreviewSmall from '~/.vitepress/theme/components/icons/IconPreviewSmall.vue'
+import IconInfo from '~/.vitepress/theme/components/icons/IconInfo.vue'
+import IconContributors from '~/.vitepress/theme/components/icons/IconContributors.vue'
+import RelatedIcons from '~/.vitepress/theme/components/icons/RelatedIcons.vue'
+import CodeGroup from '~/.vitepress/theme/components/base/CodeGroup.vue'
+import Badge from '~/.vitepress/theme/components/base/Badge.vue'
+import Label from '~/.vitepress/theme/components/base/Label.vue'
 import VPButton from 'vitepress/dist/client/theme-default/components/VPButton.vue';
 import { data } from './codeExamples.data'
 import { camelCase, startCase } from 'lodash-es'
@@ -31,8 +31,13 @@ const tabs = computed(() => data.codeExamples?.map(
 
 const codeExample = computed(() => data.codeExamples?.map(
     (codeExample) => {
-      const pascalCase = startCase(camelCase( params.value.name)).replace(/\s/g, '')
-      return codeExample.code.replace(/PascalCase/g, pascalCase).replace(/Name/g, params.value.name)
+      const pascalCaseName = startCase(camelCase( params.value.name)).replace(/\s/g, '')
+      const camelCaseName = camelCase(params.value.name)
+
+      return codeExample.code
+        .replace(/\$(?:<[^>]+>)*PascalCase/g, pascalCaseName)
+        .replace(/\$CamelCase/g, camelCaseName)
+        .replace(/\$Name/g, params.value.name)
     }
   ).join('') ?? []
 )
@@ -100,7 +105,10 @@ function releaseTagLink(version) {
   </div>
 </div>
 
-<RelatedIcons :icons="params.relatedIcons" />
+<RelatedIcons
+  v-if="params.relatedIcons"
+  :icons="params.relatedIcons"
+/>
 
 <style module>
   .preview {

docs/icons/categories.md

@@ -10,13 +10,16 @@ import { data } from './icons.data.ts'
 import { data as categoriesData } from './categories.data.ts'
 import PageContainer from '../.vitepress/theme/components/PageContainer.vue'
 import IconsCategoryOverview from '../.vitepress/theme/components/icons/IconsCategoryOverview.vue'
+import useIconsWithExternalLibs from '~/.vitepress/theme/composables/useIconsWithExternalLibs'
+
+const icons = useIconsWithExternalLibs(data.icons)
 </script>
 
 <div class="VPDoc content">
   <PageContainer>
     <IconsCategoryOverview
       :categories="categoriesData.categories"
-      :icons="data.icons"
+      :icons="icons"
       :iconCategories="categoriesData.iconCategories"
     />
   </PageContainer>

docs/icons/codeExamples.data.ts

@@ -1,11 +1,9 @@
-import createCodeExamples from '../.vitepress/lib/createCodeExamples';
+import createCodeExamples from '../.vitepress/lib/codeExamples/createCodeExamples';
 
 export default {
   async load() {
     const codeExamples = await createCodeExamples();
 
-    // const randomIcons = Array.from({ length: 200 }, () => getRandomItem(icons))
-
     return {
       codeExamples,
     };

docs/icons/index.md

@@ -10,13 +10,17 @@ head:
 ---
 
 <script setup>
+import { computed } from 'vue'
 import { data } from './icons.data.ts'
-import IconsOverview from '../.vitepress/theme/components/icons/IconsOverview.vue'
-import PageContainer from '../.vitepress/theme/components/PageContainer.vue'
+import IconsOverview from '~/.vitepress/theme/components/icons/IconsOverview.vue'
+import PageContainer from '~/.vitepress/theme/components/PageContainer.vue'
+import useIconsWithExternalLibs from '~/.vitepress/theme/composables/useIconsWithExternalLibs'
+
+const icons = useIconsWithExternalLibs(data.icons)
 </script>
 
 <div class="VPDoc content">
   <PageContainer>
-    <IconsOverview :icons="data.icons" />
+    <IconsOverview :icons="icons" />
   </PageContainer>
 </div>

docs/icons/lab/[name].md

@@ -0,0 +1,10 @@
+---
+layout: doc
+footer: false
+aside: false
+editLink: false
+next: false
+prev: false
+sidebar: true
+---
+<!--@include: ../[name].md -->

docs/icons/lab/[name].paths.ts

@@ -0,0 +1,19 @@
+import { IconEntity } from '../../.vitepress/theme/types';
+
+export default {
+  paths: async () => {
+    const iconDetailsResponse = await fetch('https://lab.lucide.dev/api/icon-details');
+    const iconDetails = (await iconDetailsResponse.json()) as Record<string, IconEntity>;
+
+    return Object.values(iconDetails).map((iconEntity) => {
+      const params = {
+        externalLibrary: 'lab',
+        ...iconEntity,
+      };
+
+      return {
+        params,
+      };
+    });
+  },
+};

docs/icons/lab/codeExamples.data.ts

@@ -0,0 +1,11 @@
+import createCodeExamples from '../../.vitepress/lib/codeExamples/createLabCodeExamples';
+
+export default {
+  async load() {
+    const codeExamples = await createCodeExamples();
+
+    return {
+      codeExamples,
+    };
+  },
+};

docs/package.json

@@ -9,13 +9,13 @@
     "docs:build": "pnpm run /^prebuild:.*/ && vitepress build",
     "docs:preview": "vitepress preview",
     "build:docs": "vitepress build",
-    "prebuild:iconNodes": "node ../scripts/writeIconNodes.mjs",
-    "prebuild:metaJson": "node ../scripts/writeIconMetaIndex.mjs",
-    "prebuild:releaseJson": "node ../scripts/writeReleaseMetadata.mjs",
+    "prebuild:iconNodes": "node ./scripts/writeIconNodes.mjs",
+    "prebuild:metaJson": "node ./scripts/writeIconMetaIndex.mjs",
+    "prebuild:releaseJson": "node ./scripts/writeReleaseMetadata.mjs",
     "prebuild:categoriesJson": "node ./scripts/writeCategoriesMetadata.mjs",
-    "prebuild:relatedIcons": "node ../scripts/writeIconRelatedIcons.mjs",
-    "prebuild:iconDetails": "node ../scripts/writeIconDetails.mjs",
-    "postbuild:vercelJson": "node ../scripts/writeVercelOutput.mjs",
+    "prebuild:relatedIcons": "node ./scripts/writeIconRelatedIcons.mjs",
+    "prebuild:iconDetails": "node ./scripts/writeIconDetails.mjs",
+    "postbuild:vercelJson": "node ./scripts/writeVercelOutput.mjs",
     "dev": "npx nitropack dev",
     "prebuild:api": "npx nitropack prepare",
     "build:api": "npx nitropack build",
@@ -25,6 +25,9 @@
   "author": "Eric Fennis",
   "license": "ISC",
   "devDependencies": {
+    "@lucide/build-icons": "workspace:*",
+    "@lucide/helpers": "workspace:*",
+    "@lucide/shared": "workspace:*",
     "@rollup/plugin-replace": "^5.0.2",
     "@types/semver": "^7.5.3",
     "h3": "^1.8.0",
@@ -41,7 +44,6 @@
     "@vueuse/core": "^10.7.2",
     "element-to-path": "^1.2.1",
     "fuse.js": "^6.5.3",
-    "js-yaml": "^4.1.0",
     "jszip": "^3.7.0",
     "lodash": "^4.17.20",
     "lodash-es": "^4.17.21",

docs/scripts/writeIconDetails.mjs

@@ -1,7 +1,6 @@
 import fs from 'fs';
 import path from 'path';
-import renderIconsObject from './render/renderIconsObject.mjs';
-import { readSvgDirectory, toCamelCase } from './helpers.mjs';
+import { readSvgDirectory, toCamelCase } from '@lucide/helpers';
 
 const currentDir = process.cwd();
 const ICONS_DIR = path.resolve(currentDir, '../icons');

docs/scripts/writeIconMetaIndex.mjs

@@ -1,6 +1,6 @@
 import fs from 'fs';
 import path from 'path';
-import { readSvgDirectory, toCamelCase } from './helpers.mjs';
+import { readSvgDirectory, toCamelCase } from '@lucide/helpers';
 
 const currentDir = process.cwd();
 const ICONS_DIR = path.resolve(currentDir, '../icons');

docs/scripts/writeIconNodes.mjs

@@ -1,7 +1,7 @@
 import fs from 'fs';
 import path from 'path';
-import renderIconsObject from './render/renderIconsObject.mjs';
-import { readSvgDirectory, toCamelCase } from './helpers.mjs';
+import { renderIconsObject } from '@lucide/build-icons';
+import { readSvgDirectory, toCamelCase } from '@lucide/helpers';
 
 const currentDir = process.cwd();
 const ICONS_DIR = path.resolve(currentDir, '../icons');

docs/scripts/writeIconRelatedIcons.mjs

@@ -1,6 +1,6 @@
 import fs from 'fs';
 import path from 'path';
-import { readSvgDirectory } from './helpers.mjs';
+import { readSvgDirectory } from '@lucide/helpers';
 
 const currentDir = process.cwd();
 const ICONS_DIR = path.resolve(currentDir, '../icons');
@@ -19,13 +19,6 @@ const categoryWeight = 3;
 const MAX_RELATED_ICONS = 4 * 17; // grid of 4x17 icons, = 68 icons
 
 const arrayMatches = (a, b) => {
-  // let matches = 0;
-  // for (let i = 0; i < a.length; ++i) {
-  //   if (b.indexOf(a[i]) != -1) {
-  //     matches++;
-  //   }
-  // }
-  // return matches;
   return a.filter((item) => b.includes(item)).length;
 };
 
@@ -53,7 +46,6 @@ const getRelatedIcons = (currentIcon, icons) => {
 };
 
 const iconsMetaDataPromises = svgFiles.map(async (iconName) => {
-  // eslint-disable-next-line import/no-dynamic-require, global-require
   const metaData = JSON.parse(fs.readFileSync(`../icons/${iconName}`));
 
   const name = iconName.replace('.json', '');

docs/scripts/writeReleaseMetadata.mjs

@@ -3,7 +3,7 @@ import fs from 'fs';
 import path from 'path';
 import { simpleGit } from 'simple-git';
 import semver from 'semver';
-import { readSvgDirectory } from './helpers.mjs';
+import { readSvgDirectory } from '@lucide/helpers';
 
 const DATE_OF_FORK = '2020-06-08T16:39:52+0100';
 

docs/scripts/writeVercelOutput.mjs

@@ -1,8 +1,7 @@
 import path from 'path';
 import fs from 'fs';
-// eslint-disable-next-line import/no-named-as-default, import/no-named-as-default-member
-import getIconMetaData from '../tools/build-icons/utils/getIconMetaData.mjs';
-import { getCurrentDirPath } from './helpers.mjs';
+import { getIconMetaData } from '@lucide/build-icons';
+import { getCurrentDirPath } from '@lucide/helpers';
 
 const currentDir = process.cwd();
 const scriptDir = getCurrentDirPath(import.meta.url);

docs/tsconfig.json

@@ -5,5 +5,8 @@
     "allowImportingTsExtensions": true,
     "allowSyntheticDefaultImports": true,
     "noEmit": true,
+    "paths": {
+      "~/.vitepress/*": ["./.vitepress/*"],
+    },
   },
 }

icons/arrow-down-0-1.json

@@ -8,6 +8,11 @@
     "filter",
     "sort",
     "ascending",
+    "descending",
+    "increasing",
+    "decreasing",
+    "rising",
+    "falling",
     "numerical"
   ],
   "categories": [

icons/arrow-down-1-0.json

@@ -7,7 +7,12 @@
   "tags": [
     "filter",
     "sort",
+    "ascending",
     "descending",
+    "increasing",
+    "decreasing",
+    "rising",
+    "falling",
     "numerical"
   ],
   "categories": [

icons/arrow-down-a-z.json

@@ -8,6 +8,11 @@
     "filter",
     "sort",
     "ascending",
+    "descending",
+    "increasing",
+    "decreasing",
+    "rising",
+    "falling",
     "alphabetical"
   ],
   "categories": [

icons/arrow-down-narrow-wide.json

@@ -6,7 +6,12 @@
   "tags": [
     "filter",
     "sort",
-    "ascending"
+    "ascending",
+    "descending",
+    "increasing",
+    "decreasing",
+    "rising",
+    "falling"
   ],
   "categories": [
     "text",

icons/arrow-down-wide-narrow.json

@@ -8,7 +8,12 @@
   "tags": [
     "filter",
     "sort",
-    "descending"
+    "ascending",
+    "descending",
+    "increasing",
+    "decreasing",
+    "rising",
+    "falling"
   ],
   "categories": [
     "text",

icons/arrow-down-z-a.json

@@ -7,7 +7,12 @@
   "tags": [
     "filter",
     "sort",
+    "ascending",
     "descending",
+    "increasing",
+    "decreasing",
+    "rising",
+    "falling",
     "alphabetical",
     "reverse"
   ],

icons/arrow-up-0-1.json

@@ -8,6 +8,11 @@
     "filter",
     "sort",
     "ascending",
+    "descending",
+    "increasing",
+    "decreasing",
+    "rising",
+    "falling",
     "numerical"
   ],
   "categories": [

icons/arrow-up-1-0.json

@@ -7,7 +7,12 @@
   "tags": [
     "filter",
     "sort",
+    "ascending",
     "descending",
+    "increasing",
+    "decreasing",
+    "rising",
+    "falling",
     "numerical"
   ],
   "categories": [

icons/arrow-up-a-z.json

@@ -8,6 +8,11 @@
     "filter",
     "sort",
     "ascending",
+    "descending",
+    "increasing",
+    "decreasing",
+    "rising",
+    "falling",
     "alphabetical"
   ],
   "categories": [

icons/arrow-up-narrow-wide.json

@@ -9,7 +9,12 @@
   "tags": [
     "filter",
     "sort",
-    "ascending"
+    "ascending",
+    "descending",
+    "increasing",
+    "decreasing",
+    "rising",
+    "falling"
   ],
   "categories": [
     "text",

icons/arrow-up-wide-narrow.json

@@ -6,7 +6,12 @@
   "tags": [
     "filter",
     "sort",
-    "descending"
+    "ascending",
+    "descending",
+    "increasing",
+    "decreasing",
+    "rising",
+    "falling"
   ],
   "categories": [
     "text",

icons/arrow-up-z-a.json

@@ -7,7 +7,12 @@
   "tags": [
     "filter",
     "sort",
+    "ascending",
     "descending",
+    "increasing",
+    "decreasing",
+    "rising",
+    "falling",
     "alphabetical",
     "reverse"
   ],

icons/bar-chart-horizontal-big.svg

@@ -1,15 +0,0 @@
-<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="M3 3v18h18" />
-  <rect width="12" height="4" x="7" y="5" rx="1" />
-  <rect width="7" height="4" x="7" y="13" rx="1" />
-</svg>

icons/book-a.svg

@@ -9,7 +9,7 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20" />
+  <path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H19a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H6.5a1 1 0 0 1 0-5H20" />
   <path d="m8 13 4-7 4 7" />
   <path d="M9.1 11h5.7" />
 </svg>

icons/book-audio.svg

@@ -9,8 +9,8 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20" />
-  <path d="M8 8v3" />
   <path d="M12 6v7" />
   <path d="M16 8v3" />
+  <path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H19a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H6.5a1 1 0 0 1 0-5H20" />
+  <path d="M8 8v3" />
 </svg>

icons/book-check.svg

@@ -9,6 +9,6 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20" />
+  <path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H19a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H6.5a1 1 0 0 1 0-5H20" />
   <path d="m9 9.5 2 2 4-4" />
 </svg>

icons/book-copy.json

@@ -1,7 +1,9 @@
 {
   "$schema": "../icon.schema.json",
   "contributors": [
-    "danielbayley"
+    "danielbayley",
+    "jguddas",
+    "karsa-mistmere"
   ],
   "tags": [
     "code",

icons/book-copy.svg

@@ -10,6 +10,6 @@
   stroke-linejoin="round"
 >
   <path d="M2 16V4a2 2 0 0 1 2-2h11" />
+  <path d="M22 18H11a2 2 0 1 0 0 4h10.5a.5.5 0 0 0 .5-.5v-15a.5.5 0 0 0-.5-.5H11a2 2 0 0 0-2 2v12" />
   <path d="M5 14H4a2 2 0 1 0 0 4h1" />
-  <path d="M22 18H11a2 2 0 1 0 0 4h11V6H11a2 2 0 0 0-2 2v12" />
 </svg>

icons/book-dashed.svg

@@ -9,15 +9,15 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <path d="M20 22h-2" />
-  <path d="M20 15v2h-2" />
-  <path d="M4 19.5V15" />
-  <path d="M20 8v3" />
-  <path d="M18 2h2v2" />
-  <path d="M4 11V9" />
-  <path d="M12 2h2" />
-  <path d="M12 22h2" />
   <path d="M12 17h2" />
-  <path d="M8 22H6.5a2.5 2.5 0 0 1 0-5H8" />
+  <path d="M12 22h2" />
+  <path d="M12 2h2" />
+  <path d="M18 22h1a1 1 0 0 0 1-1" />
+  <path d="M18 2h1a1 1 0 0 1 1 1v1" />
+  <path d="M20 15v2h-2" />
+  <path d="M20 8v3" />
+  <path d="M4 11V9" />
+  <path d="M4 19.5V15" />
   <path d="M4 5v-.5A2.5 2.5 0 0 1 6.5 2H8" />
+  <path d="M8 22H6.5a1 1 0 0 1 0-5H8" />
 </svg>

icons/book-down.svg

@@ -9,7 +9,7 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20" />
   <path d="M12 13V7" />
+  <path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H19a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H6.5a1 1 0 0 1 0-5H20" />
   <path d="m9 10 3 3 3-3" />
 </svg>

icons/book-headphones.svg

@@ -9,8 +9,8 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20" />
-  <circle cx="9" cy="12" r="1" />
+  <path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H19a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H6.5a1 1 0 0 1 0-5H20" />
   <path d="M8 12v-2a4 4 0 0 1 8 0v2" />
   <circle cx="15" cy="12" r="1" />
+  <circle cx="9" cy="12" r="1" />
 </svg>

icons/book-heart.svg

@@ -9,6 +9,6 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20" />
-  <path d="M16 8.2C16 7 15 6 13.8 6c-.8 0-1.4.3-1.8.9-.4-.6-1-.9-1.8-.9C9 6 8 7 8 8.2c0 .6.3 1.2.7 1.6C10 11.1 12 13 12 13s2-1.9 3.3-3.1c.4-.4.7-1 .7-1.7z" />
+  <path d="M16 8.2A2.22 2.22 0 0 0 13.8 6c-.8 0-1.4.3-1.8.9-.4-.6-1-.9-1.8-.9A2.22 2.22 0 0 0 8 8.2c0 .6.3 1.2.7 1.6A226.652 226.652 0 0 0 12 13a404 404 0 0 0 3.3-3.1 2.413 2.413 0 0 0 .7-1.7" />
+  <path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H19a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H6.5a1 1 0 0 1 0-5H20" />
 </svg>

icons/book-image.json

@@ -1,7 +1,8 @@
 {
   "$schema": "../icon.schema.json",
   "contributors": [
-    "danielbayley"
+    "danielbayley",
+    "jguddas"
   ],
   "tags": [
     "images",

icons/book-image.svg

@@ -9,7 +9,7 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20" />
+  <path d="m20 13.7-2.1-2.1a2 2 0 0 0-2.8 0L9.7 17" />
+  <path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H19a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H6.5a1 1 0 0 1 0-5H20" />
   <circle cx="10" cy="8" r="2" />
-  <path d="m20 13.7-2.1-2.1c-.8-.8-2-.8-2.8 0L9.7 17" />
 </svg>

icons/book-key.svg

@@ -9,9 +9,9 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H14" />
-  <path d="M20 8v14H6.5a2.5 2.5 0 0 1 0-5H20" />
-  <circle cx="14" cy="8" r="2" />
-  <path d="m20 2-4.5 4.5" />
   <path d="m19 3 1 1" />
+  <path d="m20 2-4.5 4.5" />
+  <path d="M20 8v13a1 1 0 0 1-1 1H6.5a1 1 0 0 1 0-5H20" />
+  <path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H14" />
+  <circle cx="14" cy="8" r="2" />
 </svg>

icons/book-lock.svg

@@ -9,8 +9,8 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H10" />
-  <path d="M20 15v7H6.5a2.5 2.5 0 0 1 0-5H20" />
-  <rect width="8" height="5" x="12" y="6" rx="1" />
   <path d="M18 6V4a2 2 0 1 0-4 0v2" />
+  <path d="M20 15v6a1 1 0 0 1-1 1H6.5a1 1 0 0 1 0-5H20" />
+  <path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H10" />
+  <rect x="12" y="6" width="8" height="5" rx="1" />
 </svg>

icons/book-marked.svg

@@ -9,6 +9,6 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20" />
-  <polyline points="10 2 10 10 13 7 16 10 16 2" />
+  <path d="M10 2v8l3-3 3 3V2" />
+  <path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H19a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H6.5a1 1 0 0 1 0-5H20" />
 </svg>

icons/book-minus.svg

@@ -9,6 +9,6 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20" />
+  <path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H19a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H6.5a1 1 0 0 1 0-5H20" />
   <path d="M9 10h6" />
 </svg>

icons/book-plus.svg

@@ -9,7 +9,7 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20" />
-  <path d="M9 10h6" />
   <path d="M12 7v6" />
+  <path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H19a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H6.5a1 1 0 0 1 0-5H20" />
+  <path d="M9 10h6" />
 </svg>

icons/book-text.svg

@@ -9,7 +9,7 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20" />
-  <path d="M8 7h6" />
+  <path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H19a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H6.5a1 1 0 0 1 0-5H20" />
   <path d="M8 11h8" />
+  <path d="M8 7h6" />
 </svg>

icons/book-type.svg

@@ -9,8 +9,8 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20" />
-  <path d="M16 8V6H8v2" />
-  <path d="M12 6v7" />
   <path d="M10 13h4" />
+  <path d="M12 6v7" />
+  <path d="M16 8V6H8v2" />
+  <path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H19a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H6.5a1 1 0 0 1 0-5H20" />
 </svg>

icons/book-up-2.svg

@@ -9,9 +9,9 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2" />
-  <path d="M18 2h2v20H6.5a2.5 2.5 0 0 1 0-5H20" />
   <path d="M12 13V7" />
+  <path d="M18 2h1a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H6.5a1 1 0 0 1 0-5H20" />
+  <path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2" />
   <path d="m9 10 3-3 3 3" />
   <path d="m9 5 3-3 3 3" />
 </svg>

icons/book-up.svg

@@ -9,7 +9,7 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20" />
   <path d="M12 13V7" />
+  <path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H19a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H6.5a1 1 0 0 1 0-5H20" />
   <path d="m9 10 3-3 3 3" />
 </svg>

icons/book-user.svg

@@ -9,7 +9,7 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20" />
-  <circle cx="12" cy="8" r="2" />
   <path d="M15 13a3 3 0 1 0-6 0" />
+  <path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H19a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H6.5a1 1 0 0 1 0-5H20" />
+  <circle cx="12" cy="8" r="2" />
 </svg>

icons/book-x.svg

@@ -9,7 +9,7 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20" />
   <path d="m14.5 7-5 5" />
+  <path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H19a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H6.5a1 1 0 0 1 0-5H20" />
   <path d="m9.5 7 5 5" />
 </svg>

icons/book.svg

@@ -9,5 +9,5 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20" />
+  <path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H19a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H6.5a1 1 0 0 1 0-5H20" />
 </svg>

icons/calendar-arrow-down.json

@@ -0,0 +1,25 @@
+{
+  "$schema": "../icon.schema.json",
+  "contributors": [
+    "karsa-mistmere",
+    "colebemis",
+    "ericfennis"
+  ],
+  "tags": [
+    "date",
+    "month",
+    "year",
+    "event",
+    "sort",
+    "order",
+    "ascending",
+    "descending",
+    "increasing",
+    "decreasing",
+    "rising",
+    "falling"
+  ],
+  "categories": [
+    "time"
+  ]
+}

icons/calendar-arrow-down.svg

@@ -0,0 +1,18 @@
+<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="m14 18 4 4 4-4" />
+  <path d="M16 2v4" />
+  <path d="M18 14v8" />
+  <path d="M21 11.354V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h7.343" />
+  <path d="M3 10h18" />
+  <path d="M8 2v4" />
+</svg>

icons/calendar-arrow-up.json

@@ -0,0 +1,25 @@
+{
+  "$schema": "../icon.schema.json",
+  "contributors": [
+    "karsa-mistmere",
+    "colebemis",
+    "ericfennis"
+  ],
+  "tags": [
+    "date",
+    "month",
+    "year",
+    "event",
+    "sort",
+    "order",
+    "ascending",
+    "descending",
+    "increasing",
+    "decreasing",
+    "rising",
+    "falling"
+  ],
+  "categories": [
+    "time"
+  ]
+}

icons/calendar-arrow-up.svg

@@ -0,0 +1,18 @@
+<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="m14 18 4-4 4 4" />
+  <path d="M16 2v4" />
+  <path d="M18 22v-8" />
+  <path d="M21 11.343V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h9" />
+  <path d="M3 10h18" />
+  <path d="M8 2v4" />
+</svg>

icons/calendar-minus.json

@@ -2,7 +2,8 @@
   "$schema": "../icon.schema.json",
   "contributors": [
     "karsa-mistmere",
-    "ericfennis"
+    "ericfennis",
+    "jguddas"
   ],
   "tags": [
     "date",

icons/calendar-minus.svg

@@ -9,9 +9,9 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <path d="M8 2v4" />
-  <path d="M16 2v4" />
-  <path d="M21 13V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h8" />
-  <path d="M3 10h18" />
   <path d="M16 19h6" />
+  <path d="M16 2v4" />
+  <path d="M21 15V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h8.5" />
+  <path d="M3 10h18" />
+  <path d="M8 2v4" />
 </svg>