Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add lucide package for Astro #2665

Open
wants to merge 57 commits into
base: main
Choose a base branch
from

Conversation

MoustaphaDev
Copy link

@MoustaphaDev MoustaphaDev commented Dec 5, 2024

TODOs:

  • lucide-astro package
  • Testing
  • Docs page
  • Framework logo
  • Homepage icon
  • Package logo (both light and dark)
  • Add "Lucide Astro" in the left sidebar
  • Add workflows for package publishing and testing

What is the purpose of this pull request?

  • New Icon
  • Bug fix
  • New Feature
  • Documentation update
  • Other:

Description

Add a new package for first-class Astro support.

Here's the demo project using both the legacy and rewritten package: demo project

See #2665 (comment) for more details.

Before Submitting

@github-actions github-actions bot added the 📦 dependencies Pull requests that update a dependency file label Dec 5, 2024
@MoustaphaDev MoustaphaDev marked this pull request as draft December 5, 2024 21:07
@github-actions github-actions bot added 🎨 icon About new icons 🫧 metadata Improved metadata labels Dec 5, 2024
Copy link

github-actions bot commented Dec 5, 2024

Added or changed icons

icons/picture-in-picture.svg

Preview cohesion icons/square-activity.svg
icons/picture-in-picture.svg
icons/files.svg
Preview stroke widths icons/picture-in-picture.svg
icons/picture-in-picture.svg
icons/picture-in-picture.svg
DPI Preview (24px) icons/picture-in-picture.svg
Icon X-rays icons/picture-in-picture.svg
Icon Diffs icons/picture-in-picture.svg
Icons as code

Works for: lucide-react, lucide-react-native, lucide-preact, lucide-vue-next

const PictureInPictureIcon = createLucideIcon('PictureInPicture', [
  ["path",{"d":"M2 10h6V4"}],
  ["path",{"d":"m2 4 6 6"}],
  ["path",{"d":"M21 10V7a2 2 0 0 0-2-2h-7"}],
  ["path",{"d":"M3 14v2a2 2 0 0 0 2 2h3"}],
  ["rect",{"width":"10","height":"7","x":"12","y":"14","rx":"1"}]
])

@github-actions github-actions bot added 📖 documentation Improvements or additions to documentation 🌍 site Has to do something with the Lucide website labels Dec 6, 2024
@MoustaphaDev
Copy link
Author

MoustaphaDev commented Dec 26, 2024

The PR is ready to be reviewed

Here's the demo project using both the legacy and rewritten package

https://stackblitz.com/github/MoustaphaDev/lucide-astro-next-demo

Here are the differences between the legacy package and the new package:

  • An Icon component export that renders icon nodes
  • An icons export containing all icons
  • Export path for every icon for perf, to allow import Camera from 'lucide-solid/icons/camera';
    When importing all components, you should use the icons exports instead of a namespaced import, as the package now exports symbols other than lucide component icons.
---
import * as icons from "lucide-astro" // ❌ wrong way, `icons` will contain symbols other than icon components
import { icons } from "lucide-astro" // ✅ right way, `icons` only contains icon components
---
  • Bumped one major, to avoid breaking current users' sites.

@realguse
Copy link

This looks epic, hope you're pleased with how it turned out!

Copy link
Member

@ericfennis ericfennis left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice work @MoustaphaDev!
We are almost good to go!
If @Aviortheking also approves this PR and is ready to transfer the ownership of the NPM package we can start publishing!

@@ -0,0 +1,29 @@
import { parseHTML } from 'linkedom';
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice work 😎

@Aviortheking
Copy link
Contributor

Nice work @MoustaphaDev! We are almost good to go! If @Aviortheking also approves this PR and is ready to transfer the ownership of the NPM package we can start publishing!

I'll take a look later in the week :D

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
📦 dependencies Pull requests that update a dependency file 📖 documentation Improvements or additions to documentation 🎨 icon About new icons 🫧 metadata Improved metadata 🌍 site Has to do something with the Lucide website
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants