Skip to content

Invalid Icon filenames, as defined/validated by Iconify, are silently failing

Open

Description

While working on a new project with new developers we stumbled upon this silent failure.
We had Icons exported from Figma in the format:

  • iconCalendar.svg
  • iconPerson.svg
  • ...

Which were then loaded as customCollection via NuxtConfig

icon: {
    customCollections: [
      {
        prefix: 'theme-icon',
        dir: './assets/icons'
      },
    ],
  },

The message upon restart was reassuring that all icons were loaded and should be accessible.

Nuxt Icon loaded local collection theme-icon with 43 icons.

But we could not access them, or better said, we could only access the ones which only were lowercase. So I digged down the whole integration with the following waypoints:

In words:

  • The collection gets loaded and auto-detects all svg files within the collection folder. It also validates if the content is valid and loads them into the internal collection of nuxt-icon.
  • Then when called by the Component integration it gets converted/added to the Iconify component which then goes down its library path to add it to the/a custom collection for display.
  • This in fact validates the name given and will NOT add it if its invalid thus not displaying any icon with invalid names.
  • No error handling is done for this in the Component (addIcon in fact returns success which could be handled)
  • No validation is done when creating/loading the nuxt-icon collection.

Suggested resolution: For better DX there should also be a name validation when loading the collection and it should warn about all icons not following the convention. I can craft the corresponding PR.


Did I miss something elsewhere or is my deduction of the error correct?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions