feat(core): rewrite to use built-in svg components #239
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
🦋 Changeset detectedLatest commit: 8d750ae The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
stramel
force-pushed
the
built-in-svg
branch
from
e2ca5e5 to
05d358c
Compare
stramel
force-pushed
the
built-in-svg
branch
from
a43bfff to
52e0323
Compare
stramel
force-pushed
the
built-in-svg
branch
from
5148423 to
eb307b8
Compare
This was referenced Dec 26, 2024
13 tasks
stramel
commented
Mar 31, 2025
| height = DEFAULT_ICON_SIZE, | ||
| body, | ||
| } = data; | ||
| const svg = `<svg data-icon="${collection}:${icon}" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}">${body}</svg>`; |
There was a problem hiding this comment.
@natemoo-re Should we switch this to {collection}/{icon}? This would match the import rather than having a separate way of referencing the combination
Suggested change
| const svg = `<svg data-icon="${collection}:${icon}" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}">${body}</svg>`; | |
| const svg = `<svg data-icon="${collection}/${icon}" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}">${body}</svg>`; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Warning
These changes are still highly volatile and likely to change. Proceed with caution
Building on top of the hopefully soon to be accepted Built-in SVG components in withastro/astro#12067. Discussed here withastro/roadmap#699
This adds virtual paths to the Iconify collections and icons. Simply import
astro:icons/<collection>/<icon>in order to use the icon component.This changes also removes the functionality associated with local svg imports since this is now covered through Astro.
Another big change is that we're no longer running SVGO. I'm assuming that Iconify is handling most of the optimizations for us. Any local icon optimizations would be moved into the astro repo (likely post MVP)
TODO:
Possible Future Enhancements:
Typescript Plugin: We could write a typescript plugin that could autosuggest collections and icons as you type. We could also add additional validation for collection + icon combinations. We could also warn on deprecated usages.
Dev Toolbar: We could write a dev toolbar that could highlight all icons, show deprecated icons, and list all icons on the page. We could also potentially suggest icons that would be good candidates for sprite mode.