feat: Allow to put custom attributes

Signed-off-by: Florian BOUILLON <[email protected]>

.github/workflows/build_publish.yml

@@ -5,47 +5,47 @@
 name: Build & Package
 
 on:
-  schedule:
-    # * is a special character in YAML so you have to quote this string
-    - cron: '0 */6 * * *'
-  workflow_dispatch:
+	schedule:
+		# * is a special character in YAML so you have to quote this string
+		- cron: '0 */6 * * *'
+	workflow_dispatch:
 
 jobs:
-  run:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-        with:
-          persist-credentials: false 
-          fetch-depth: 0
-      - uses: actions/setup-node@v3
-        with:
-          node-version: 20
-          registry-url: https://registry.npmjs.org/
-      - name: Upgrade
-        id: upgrade
-        run: node upgrade.js
-        continue-on-error: true
-      - name: Install
-        run: npm i
-        if: steps.upgrade.outcome == 'success' && steps.upgrade.conclusion == 'success'
-      - name: Build
-        run: npm run build
-        if: steps.upgrade.outcome == 'success' && steps.upgrade.conclusion == 'success'
-      - name: Publish on NPM
-        run: npm publish
-        if: steps.upgrade.outcome == 'success' && steps.upgrade.conclusion == 'success'
-        env:
-          NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
-      - name: Commit files
-        run: |
-          git config --local user.email "[email protected]"
-          git config --local user.name "Dzeio BOT"
-          git commit -a -m "bump from remote"
-        if: steps.upgrade.outcome == 'success' && steps.upgrade.conclusion == 'success'
-      - name: Push changes
-        uses: ad-m/github-push-action@master
-        with:
-          github_token: ${{ secrets.GIT_TOKEN }}
-          branch: ${{ github.ref }}
-        if: steps.upgrade.outcome == 'success' && steps.upgrade.conclusion == 'success'
+	run:
+		runs-on: ubuntu-latest
+		steps:
+			- uses: actions/checkout@v3
+				with:
+					persist-credentials: false 
+					fetch-depth: 0
+			- uses: actions/setup-node@v3
+				with:
+					node-version: 20
+					registry-url: https://registry.npmjs.org/
+			- name: Upgrade
+				id: upgrade
+				run: node upgrade.js
+				continue-on-error: true
+			- name: Install
+				run: npm i
+				if: steps.upgrade.outcome == 'success' && steps.upgrade.conclusion == 'success'
+			- name: Build
+				run: npm run build
+				if: steps.upgrade.outcome == 'success' && steps.upgrade.conclusion == 'success'
+			- name: Publish on NPM
+				run: npm publish
+				if: steps.upgrade.outcome == 'success' && steps.upgrade.conclusion == 'success'
+				env:
+					NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
+			- name: Commit files
+				run: |
+					git config --local user.email "[email protected]"
+					git config --local user.name "Dzeio BOT"
+					git commit -a -m "bump from remote"
+				if: steps.upgrade.outcome == 'success' && steps.upgrade.conclusion == 'success'
+			- name: Push changes
+				uses: ad-m/github-push-action@master
+				with:
+					github_token: ${{ secrets.GIT_TOKEN }}
+					branch: ${{ github.ref }}
+				if: steps.upgrade.outcome == 'success' && steps.upgrade.conclusion == 'success'

src/.Layout.astro

@@ -1,32 +1,21 @@
 ---
-import type { Props as IconProps } from './index.d.ts'
+export type { Props } from './index.d.ts'
 
-export interface Props extends IconProps {}
-
-const {
-	size = 24,
-	strokeWidth = 2,
-	width = size,
-	height = size,
-	stroke = 'currentColor',
-	strokeLinecap = 'round',
-	strokeLinejoin = 'round',
-	fill = 'none',
-	viewBox = '0 0 24 24'
-} = (Astro.props ?? {})
+const size = Astro.props.size
+delete Astro.props.size
 ---
 
 <svg
 	xmlns="http://www.w3.org/2000/svg"
-	class={Astro.props.class}
-	width={width}
-	height={height}
-	fill={fill}
-	viewBox={viewBox}
-	stroke={stroke}
-	stroke-width={strokeWidth}
-	stroke-linecap={strokeLinecap}
-	stroke-linejoin={strokeLinejoin}
+	stroke-width={2}
+	width={size ?? 24}
+	height={size ?? 24}
+	stroke="currentColor"
+	stroke-linecap="round"
+	stroke-linejoin="round"
+	fill="none"
+	viewBox="0 0 24 24"
+	{...Astro.props}
 >
 	<slot />
 </svg>

src/Template.astro

@@ -3,8 +3,6 @@ import Layout from './.Layout.astro'
 export type { Props } from './index.d.ts'
 ---
 
-<Layout
-	{...Astro.props}
->
+<Layout {...Astro.props}>
 	<!-- icon -->
 </Layout>

src/index.d.ts

@@ -1,12 +1,7 @@
-export interface Props {
+/// <reference types="astro/astro-jsx" />
+
+export interface Props extends astroHTML.JSX.SVGAttributes {
 	size?: number
+	// https://github.com/withastro/astro/pull/8189
 	width?: number
-	height?: number
-	strokeWidth?: number
-	stroke?: string
-	fill?: string
-	class?: string
-	viewBox?: string
-	strokeLinecap?: "round" | "butt" | "square" | "inherit"
-	strokeLinejoin?: "round" | "inherit" | "miter" | "bevel"
 }

website/Dockerfile

@@ -14,8 +14,8 @@ WORKDIR /home/node
 # Add package json
 ADD --chown=node:node package.json package-lock.json ./
 
-# install dependencies from package lock
-RUN npm ci
+# install dependencies from package JSON (to keep being up to date with lucide-astro)
+RUN npm i
 
 # Add project files
 ADD --chown=node:node . .

website/src/pages/index.astro

@@ -2,7 +2,7 @@
 import * as LucideAstro from 'lucide-astro'
 import { Github } from 'lucide-astro'
 import { objectMap } from '@dzeio/object-util'
-
+import { Image } from 'astro:assets'
 import LucideLight from '../assets/lucide.light.svg'
 import LucideDark from '../assets/lucide.dark.svg'
 ---
@@ -19,8 +19,8 @@ import LucideDark from '../assets/lucide.dark.svg'
 	<body class="bg-gray-50 dark:bg-gray-950 dark:text-white">
 		<div class="flex w-full justify-evenly my-8 px-4">
 			<p class="font-bold text-xl flex gap-2 items-center">
-				<img height={48} src={LucideLight.src} class="block dark:hidden" />
-				<img height={48} src={LucideDark.src} class="hidden dark:block" />
+				<Image height={48} src={LucideLight} class="dark:hidden" alt="Astro Logo" />
+				<Image height={48} src={LucideDark} class="hidden dark:block" alt="Astro Logo" />
 				<span>Lucide Icons for the Astro Framework</span>
 			</p>
 			<a target="_blank" class="flex gap-2 items-center" href="https://github.com/dzeiocom/lucide-astro">