Using local collection.json

[uncldrw]

Is it possible to use a collection that is inside my project's assets? I have a JSON in the IconifyJSON format. It would be nice if it's somehow possible to import a custom IconifyJSON.

my custom collection:

{
  "prefix": "ti",
  "info": {
    "name": "Telekom",
    "total": 742,
    "version": "1.0.0",
    "author": {
      "name": "",
      "url": ""
    },
    "samples": [],
    "category": "Custom",
    "tags": [],
    "palette": false
  },
  "lastModified": 1738666400,
  "icons": {
    "add-default": {
      "body": "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<svg width=\"24px\" height=\"24px\" viewBox=\"0 0 24 24\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n    <title>/svg/icon/action",
      "width": 24,
      "height": null
    },

I was trying to do it like this:

import tailwindcss from "@tailwindcss/vite";
import { createResolver } from "@nuxt/kit";

const { resolve } = createResolver(import.meta.url);
export default defineNuxtConfig({
  compatibilityDate: "2024-11-01",
  icon: {
    customCollections: resolve("./assets/icons/collections.json"),
  },
  modules: ["nuxt-icon-tw"],
  css: ["~/assets/styles/main.pcss"],
  postcss: {
    plugins: {
      "postcss-nested": {},
      "@tailwindcss/postcss": {},
    },
  },
  vite: {
    plugins: [tailwindcss()],
  },
});

[lumavida]

Got the same problem,

you can use custom json collection with the nuxt-icon-we module, which you already use in your config file.

Or the quick and dirty way, add an existing @iconify-json collection in node_modules and clone the folder. rename to "ti" and edit the icons.json and insert the icons from your collection, do the same with info.json.

Worked for me.

[oneminch]

Does your icon.customCollections value resolve to an array? From the docs, it looks like it expects an array of icons.

export default defineNuxtConfig({
  modules: [
    '@nuxt/icon'
  ],
  icon: {
    customCollections: [
      {
        prefix: 'ti',
        // other fields
      },
    ],
  },
})

[Pentadome]

Does your icon.customCollections value resolve to an array? From the docs, it looks like it expects an array of icons.

export default defineNuxtConfig({ modules: [ '@nuxt/icon' ], icon: { customCollections: [ { prefix: 'ti', // other fields }, ], }, })

It expects a directory of svgs, but you can't specify a iconify json afaik

[Pentadome]

Or the quick and dirty way, add an existing @iconify-json

Thanks. I added a folder and an icons.json file in it. Now it works.

Really is awkward that we have to edit our node_modules folder in order to use a custom iconify json. I hope this gets improved in the future.

[Aareksio]

Hey! I think the feature from https://github.com/nuxt/icon/pull/366 implemented exactly what you needed. Could you confirm & resolve if so? @uncldrw @Pentadome

Usage: https://github.com/nuxt/icon/blob/main/playground/nuxt.config.ts#L55-L64 In practice, you can import your collection in nuxt.config.ts instead of inlining it :)