feat: add lucide package for Astro

.github/workflows/lucide-astro.yml

@@ -0,0 +1,42 @@
+name: Lucide Astro Checks
+
+on:
+  pull_request:
+    paths:
+      - packages/lucide-astro/**
+      - packages/shared/**
+      - tools/build-icons/**
+      - pnpm-lock.yaml
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v2
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 18
+          cache: 'pnpm'
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Build
+        run: pnpm --filter lucide-astro build
+
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: pnpm/action-setup@v2
+      - uses: actions/setup-node@v3.8.1
+        with:
+          node-version: 18
+          cache: 'pnpm'
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Test
+        run: pnpm --filter lucide-astro test

.github/workflows/release.yml

@@ -52,6 +52,7 @@ jobs:
             'lucide-preact',
             'lucide-solid',
             'lucide-svelte',
+            'lucide-astro'
           ]
     steps:
       - uses: actions/checkout@v4

README.md

@@ -40,6 +40,7 @@ Lucide is an open-source icon library that provides 1000+ vector (svg) files for
 | <img src="https://lucide.dev/framework-logos/preact.svg" alt="Preact logo" width="48"> | `lucide-preact` | [![npm](https://img.shields.io/npm/v/lucide-preact)](https://www.npmjs.com/package/lucide-preact) ![NPM Downloads](https://img.shields.io/npm/dw/lucide-preact) | [Docs](https://lucide.dev/guide/packages/lucide-preact) [Source](./packages/lucide-preact) |
 | <img src="https://lucide.dev/framework-logos/react-native.svg" alt="React Native logo" width="48"> | `lucide-react-native` | [![npm](https://img.shields.io/npm/v/lucide-react-native)](https://www.npmjs.com/package/lucide-react-native) ![NPM Downloads](https://img.shields.io/npm/dw/lucide-react-native) | [Docs](https://lucide.dev/guide/packages/lucide-react-native) [Source](./packages/lucide-react-native) |
 | <img src="https://lucide.dev/framework-logos/angular.svg" alt="Angular logo" width="48"> | `lucide-angular` | [![npm](https://img.shields.io/npm/v/lucide-angular)](https://www.npmjs.com/package/lucide-angular) ![NPM Downloads](https://img.shields.io/npm/dw/lucide-angular) | [Docs](https://lucide.dev/guide/packages/lucide-angular) [Source](./packages/lucide-angular) |
+| <img src="https://lucide.dev/framework-logos/astro.svg" alt="Astro logo" width="48"> | `lucide-astro` | [![npm](https://img.shields.io/npm/v/lucide-astro)](https://www.npmjs.com/package/lucide-astro) ![NPM Downloads](https://img.shields.io/npm/dw/lucide-astro) | [Docs](https://lucide.dev/guide/packages/lucide-astro) [Source](./packages/lucide-astro) |
 | <img src="https://lucide.dev/framework-logos/svg.svg" alt="SVG logo" width="48"> | `lucide-static` | [![npm](https://img.shields.io/npm/v/lucide-static)](https://www.npmjs.com/package/lucide-static) ![NPM Downloads](https://img.shields.io/npm/dw/lucide-static) | [Docs](https://lucide.dev/guide/packages/lucide-static) [Source](./packages/lucide-static) |
 
 ### Figma

docs/.vitepress/data/packageData.json

@@ -127,8 +127,25 @@
       }
     ]
   },
-  "lucide-static": {
+  "lucide-astro": {
     "order": 8,
+    "icon": "astro",
+    "iconDark": "astro-dark",
+    "shields": [
+      {
+        "alt": "npm",
+        "src": "https://img.shields.io/npm/v/lucide-astro",
+        "href": "https://www.npmjs.com/package/lucide-astro"
+      },
+      {
+        "alt": "npm",
+        "src": "https://img.shields.io/npm/dw/lucide-astro",
+        "href": "https://www.npmjs.com/package/lucide-astro"
+      }
+    ]
+  },
+  "lucide-static": {
+    "order": 9,
     "icon": "svg",
     "shields": [
       {

docs/.vitepress/sidebar.ts

@@ -96,6 +96,10 @@ const sidebar: UserConfig<DefaultTheme.Config>['themeConfig']['sidebar'] = {
           text: 'Lucide Preact',
           link: '/guide/packages/lucide-preact',
         },
+        {
+          text: 'Lucide Astro',
+          link: '/guide/packages/lucide-astro',
+        },
         {
           text: 'Lucide Static',
           link: '/guide/packages/lucide-static',

docs/.vitepress/theme/components/home/HomePackagesSection.data.ts

@@ -37,6 +37,12 @@ export default {
           logo: '/framework-logos/angular.svg',
           label: 'Lucide documentation for Angular',
         },
+        {
+          name: 'lucide-astro',
+          logo: '/framework-logos/astro.svg',
+          logoDark: '/framework-logos/astro-dark.svg',
+          label: 'Lucide documentation for Astro',
+        },
         {
           name: 'lucide-react-native',
           logo: '/framework-logos/react-native.svg',

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

@@ -13,18 +13,25 @@ const { go } = useRouter()
     <HomeSectionTitle>Available For:</HomeSectionTitle>
     <div class="packages-list">
       <a
-        v-for="{ name, logo } in data.packages"
+        v-for="{ name, logo, logoDark } in data.packages"
         :href="`/guide/packages/${name}`"
         class="package-logo"
         :aria-label="`Read more about: ${name} package`"
         @click.prevent="go(`/guide/packages/${name}`)"
       >
         <img
           :src="logo"
-          height="36"
-          width="36"
+          :class="{ light: logoDark, 'image-logo': true }"
+          :alt="`${name} logo`"
           loading="lazy"
+        />
+
+        <img
+          v-if="logoDark"
+          :src="logoDark"
           :alt="`${name} logo`"
+          class="image-logo dark"
+          loading="lazy"
         />
       </a>
     </div>
@@ -35,6 +42,13 @@ const { go } = useRouter()
 </template>
 
 <style scoped>
+
+.image-logo {
+  object-fit: contain;
+  width: 36px;
+  height: 36px;
+}
+
 .packages-list {
   display: flex;
   flex-wrap: wrap;
@@ -57,4 +71,11 @@ const { go } = useRouter()
 .package-logo:hover {
   opacity: .6;
 }
+
+html.dark .image-logo.light {
+  display: none;
+}
+html:not(.dark) .image-logo.dark {
+  display: none;
+}
 </style>

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

@@ -15,6 +15,7 @@ export default {
           documentation: `/guide/packages/${pData.name}`,
           source: `https://github.com/lucide-icons/lucide/tree/main/packages/${pData.name}`,
           icon: `/framework-logos/${packageData[pData.name].icon}.svg`,
+          iconDark: Boolean(packageData[pData.name].iconDark) ? `/framework-logos/${packageData[pData.name].iconDark}.svg` : null
         }))
         .sort((a, b) => a.order - b.order),
       thirdPartyPackages,

docs/guide/index.md

@@ -28,7 +28,8 @@ However, not everyone can understand them easily. Read more about [how to use Lu
 
 ## Official Packages
 
-Lucide's official packages are designed to work on different platforms, making it easier for users to integrate icons into their projects. The packages are available for various technologies, including [Web (Vanilla)](https://lucide.dev/guide/packages/lucide), [React](https://lucide.dev/guide/packages/lucide-react), [React Native](https://lucide.dev/guide/packages/lucide-react-native), [Vue](https://lucide.dev/guide/packages/lucide-vue), [Vue 3](https://lucide.dev/guide/packages/lucide-vue-next), [Svelte](https://lucide.dev/guide/packages/lucide-svelte), [Preact](https://lucide.dev/guide/packages/lucide-preact), [Solid](https://lucide.dev/guide/packages/lucide-solid), [Angular](https://lucide.dev/guide/packages/lucide-angular), [NodeJS](https://lucide.dev/guide/packages/lucide-static#nodejs) and [Flutter](https://lucide.dev/guide/packages/lucide-flutter).
+Lucide's official packages are designed to work on different platforms, making it easier for users to integrate icons into their projects. The packages are available for various technologies, including [Web (Vanilla)](https://lucide.dev/guide/packages/lucide), [React](https://lucide.dev/guide/packages/lucide-react), [React Native](https://lucide.dev/guide/packages/lucide-react-native), [Vue](https://lucide.dev/guide/packages/lucide-vue), [Vue 3](https://lucide.dev/guide/packages/lucide-vue-next), [Svelte](https://lucide.dev/guide/packages/lucide-svelte), [Preact](https://lucide.dev/guide/packages/lucide-preact), [Solid](https://lucide.dev/guide/packages/lucide-solid), [Angular](https://lucide.dev/guide/packages/lucide-angular), [Astro](https://lucide.dev/guide/packages/lucide-astro), [NodeJS](https://lucide.dev/guide/packages/lucide-static#nodejs) and [Flutter](https://lucide.dev/guide/packages/lucide-flutter).
 
 ## Community
+
 If you have any questions about Lucide, feel free to reach out to the community. You can find them on [GitHub](https://github.com/lucide-icons/lucide) and [Discord](https://discord.gg/EH6nSts).

docs/guide/installation.md

@@ -186,6 +186,32 @@ bun add lucide-preact
 
 :::
 
+## Astro
+
+Implementation of the lucide icon library for Astro applications.
+
+::: code-group
+
+```sh [pnpm]
+pnpm install lucide-astro
+```
+
+```sh [yarn]
+yarn add lucide-astro
+```
+
+```sh [npm]
+npm install lucide-astro
+```
+
+```sh [bun]
+bun add lucide-astro
+```
+
+:::
+
+For more details, see the [documentation](packages/lucide-astro.md).
+
 ## Static usage
 
 Implementation of the lucide icon library for multiple usages that like to use: SVG files icons, SVG Sprite, Icon Fonts and static SVG strings export in Common JS modules (for NodeJS).