[Module Listing Request]: `nuxt-my-icons`
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 1.1k
- Forks
- 354
- Avg merge
- 10h 18m
- Merged PRs (30d)
- 12
Description
Description
Handy, performant and optimised toolkit to work with SVG icons written specifically for Nuxt framework.
Official "Nuxt Icon" module provides a direct access to tons of icons to choose from.
My module focuses on creating personal, lightweight, fast and dependency-free icon set for sites.
Basically, the module adds three components:
<MyIcon name="..." />— renders any.svgfile icon underassets/icons(by default) directory. It also bundles all icons into single icon set file and prefetches it. Alsonameprop has type guard and accepts only names of existing icons.<MyInlineIcon name="..." svg="..." />— allows to insert SVG icon at runtime and inlines it's svg.<MyRuntimeIcon name="..." svg="..." />— does almost the same as inlining icon BUT stores the SVG symbols for all runtime icons in global<svg>tag that is persistent between page changes and also fully supports SSR. This allows not to duplicate SVG each time the runtime icon is used.
See it in action in demo page or play with the module in live playground in browser.
For more info please see module's GitHub repository page.
I am not an expert in Nuxt and I believe some things inside module can be done easier so I am open to any suggestions from Nuxt contributors and devs.
Repository
https://github.com/Gwynerva/nuxt-my-icons
npm
https://www.npmjs.com/package/nuxt-my-icons
Nuxt Compatibility
Nuxt 3
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reviewing the Nuxt modules catalog contribution guidance and the linked nuxt-my-icons repository, demo, and npm package. Confirm whether the Nuxt 3 module meets the catalog's requirements and identify the catalog entry or metadata that would need updating; done means the module is listed with accurate details and links.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- nuxt
- Domain
- content
- Issue type
- Feature
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 30/100