nuxt / nuxt/modules

[Module Listing Request]: `nuxt-my-icons`

Open
#1,146 1 comment 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

module-request
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:

  1. <MyIcon name="..." /> — renders any .svg file icon under assets/icons (by default) directory. It also bundles all icons into single icon set file and prefetches it. Also name prop has type guard and accepts only names of existing icons.
  2. <MyInlineIcon name="..." svg="..." /> — allows to insert SVG icon at runtime and inlines it's svg.
  3. <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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.