custom icons not working

devinschumacher commented 6 days ago

Environment

"dependencies": {
    "@iconify-json/lucide": "^1.2.11",
    "@nuxt/ui": "3.0.0-alpha.8",
    "drizzle-orm": "^0.36.1",
    "nuxt": "^3.14.159",
    "postgres": "^3.4.5",
    "vue": "latest",
    "vue-router": "latest"
  },
  "devDependencies": {
    "@nuxt/test-utils": "^3.14.4",
    "@nuxtjs/html-validator": "^1.8.2",
    "@vue/test-utils": "^2.4.6",
    "drizzle-kit": "^0.28.0",
    "happy-dom": "^15.11.0",
    "jsdom": "^25.0.1",
    "playwright-core": "^1.48.2",
    "vitest": "^2.1.4"
  }

Version

3.0.0-alpha.8

Reproduction

trying to make and use a custom icon:

assets/icons/soundcloud.svg

<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M23.999 14.165c-.052 1.796-1.612 3.169-3.4 3.169h-8.18a.68.68 0 0 1-.675-.683V7.862a.747.747 0 0 1 .452-.724s.75-.513 2.333-.513a5.364 5.364 0 0 1 2.763.755 5.433 5.433 0 0 1 2.57 3.54c.282-.08.574-.121.868-.12.884 0 1.73.358 2.347.992s.948 1.49.922 2.373ZM10.721 8.421c.247 2.98.427 5.697 0 8.672a.264.264 0 0 1-.53 0c-.395-2.946-.22-5.718 0-8.672a.264.264 0 0 1 .53 0ZM9.072 9.448c.285 2.659.37 4.986-.006 7.655a.277.277 0 0 1-.55 0c-.331-2.63-.256-5.02 0-7.655a.277.277 0 0 1 .556 0Zm-1.663-.257c.27 2.726.39 5.171 0 7.904a.266.266 0 0 1-.532 0c-.38-2.69-.257-5.21 0-7.904a.266.266 0 0 1 .532 0Zm-1.647.77a26.108 26.108 0 0 1-.008 7.147.272.272 0 0 1-.542 0 27.955 27.955 0 0 1 0-7.147.275.275 0 0 1 .55 0Zm-1.67 1.769c.421 1.865.228 3.5-.029 5.388a.257.257 0 0 1-.514 0c-.21-1.858-.398-3.549 0-5.389a.272.272 0 0 1 .543 0Zm-1.655-.273c.388 1.897.26 3.508-.01 5.412-.026.28-.514.283-.54 0-.244-1.878-.347-3.54-.01-5.412a.283.283 0 0 1 .56 0Zm-1.668.911c.4 1.268.257 2.292-.026 3.572a.257.257 0 0 1-.514 0c-.241-1.262-.354-2.312-.023-3.572a.283.283 0 0 1 .563 0Z"/></svg>

nuxt.config.ts

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  compatibilityDate: '2024-04-03',
  devtools: { enabled: true },
  modules: ['@nuxt/ui', '@nuxtjs/html-validator'],
  css: ['~/assets/css/main.css'],
  icon: {
    customCollections: [{
      prefix: 'custom',
      dir: './assets/icons'
    }]
  },

  // modules
  htmlValidator: {
    usePrettier: false,
  },
})

in my component SFooter.vue:

<nav aria-label="Social Media Links" class="mb-4 flex space-x-6 md:mb-0">
            <nuxt-link
                       v-for="social in socialLinks"
                       :key="social.name"
                       :href="social.link"
                       :aria-label="social.name"
                       class="hover:text-gray-700">
              <UIcon :name="social.icon" class="size-5" aria-hidden="true" />
              <span class="sr-only">Visit our {{ social.name }} page</span>
            </nuxt-link>
          </nav>

<script setup lang=ts>
const socialLinks = [
  {
    name: 'SoundCloud',
    link: '#',
    icon: 'i-custom-soundcloud',
  },
...

Description

I get the warning in console: WARN [Icon] failed to load icon custom:soundcloud

and nothing displaying on front end

Additional context

No response

Logs

benjamincanac commented 6 days ago

Duplicate #2590.

devinschumacher commented 5 days ago

ty @benjamincanac

benjamincanac commented 5 days ago

Can you have a look in your lockfile to make sure you're using the latest @nuxt/icon@1.7.2?

devinschumacher commented 4 days ago

Can you have a look in your lockfile to make sure you're using the latest @nuxt/icon@1.7.2?

pnpm-lock.yaml is showing '@nuxt/icon@1.6.1'

i can upgrade it.

Q: for future reference, how would i know to know that i need to update this to fix the issue? is there any way to figure that out (other than coming to the issues board)?

edit: after updating to 1.7.2 im still getting WARN [Icon] failed to load icon custom-soundcloud in console, and icon is not displaying on page

benjamincanac commented 4 days ago

Well, this is an issue with @nuxt/icon not @nuxt/ui which just installs the @nuxt/icon module.

~~Would you mind providing a minimal reproduction? I can't seem to reproduce on my end.~~

benjamincanac commented 4 days ago

I've managed to reproduce: https://stackblitz.com/edit/breadcrumb-outputs-class-string-instead-of-icon-2-ss1ewi?file=package.json,nuxt.config.ts

benjamincanac commented 4 days ago

However, in this reproduction the bug happens when prefixes have a - inside. It doesn't happen for your specific case 🤔

stijns96 commented 4 days ago

Hi @benjamincanac,

I don't know why and what, but there are quite some things going wrong when you use custom icons. If I got it right, i- is being used for the internal API of nuxt/icons. For custom icons you shouldn't add i-.

I've tried quite a couple of things now, and as mentioned in #2590 on dev it is working different then on prod.

benjamincanac commented 4 days ago

It was just fixed in https://github.com/nuxt/icon/releases/tag/v1.7.5, can you try it?

benjamincanac commented 4 days ago

@stijns96 No you can also use i- prefix for custom icons, it's unrelated.

devinschumacher commented 3 days ago

It was just fixed in https://github.com/nuxt/icon/releases/tag/v1.7.5, can you try it?

awesome. fixed

devinschumacher commented 3 days ago

Solved https://github.com/nuxt/ui/issues/2609#issuecomment-2475912508

nuxt / ui