nuxt / nuxt/icon

Can't use svg icons from nuxt layer

Open
#48 2 comments 3 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
1.2k
Forks
96
Avg merge
8h 12m
Merged PRs (30d)
2

Description

I want to share common icons between projects using nuxt layers. I would prefer to keep my icons in svg files. Unfortunately, the nuxt-icons module does not meet my expectations (import all icons), so I decided to use your solution.

When I hold the icon in /components/global everything works great. Unfortunately, when I keep this icon in a nuxt layer, I get a string with the name instead of the icon.

I would also love to be able to use param-case in the name property.

Reproduction: https://stackblitz.com/edit/github-qddkmm?file=base/nuxt.config.ts

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 with the linked StackBlitz reproduction and its base/nuxt.config.ts, comparing the working icon in /components/global with the same icon in a Nuxt layer. Verify how the component resolves the icon name and whether param-case is accepted in the name property; done means layer SVG icons render instead of returning their names and the requested naming form works.

Written by the indexing model from the issue text.

Assessment

Tech stack
nuxt, typescript
Domain
frontend, web-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
30/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.