search

nuxt / ui

A UI Library for Modern Web Apps, powered by Vue & Tailwind CSS.
https://ui.nuxt.com
MIT License
3.93k stars 488 forks source link

Icons #1441

Closed noxsii closed 7 months ago

noxsii commented 7 months ago

Description

Hello everyone. Unfortunately it is not possible to use all icons from Iconify? But what is in the docs. Here's an example:

Use flagpack:ad in Icon Component like <Icon name="flagpack:ad" /> works fine.. And in nuxtui dosnt work with i-flagpack-ad... why?

prpanto commented 7 months ago

You need to load the icons on the nuxt configs. This need to mention it on the docs too ...

ui: {
    icons: ['lucide', 'flagpack']
  }
noxsii commented 7 months ago

dosn't work in app config and nuxt config... i got this: /Users/****/PhpstormProjects/****/assets/icons/

prpanto commented 7 months ago

For me works perfect. This is the way that used form the guys in the nuxt ui pro templates check dashboard... You have install the icons? @iconify-json/flagpack or all icon packages @iconify/json I dont know about your error...is just a path...

noxsii commented 7 months ago

why should I install the icons individually? The icons all come with the nuxt/icon package?

noxsii commented 7 months ago

OK, I was able to recreate the whole thing now. which is really weird. Why do I have to install the icons individually? these all come with nuxt/icon. https://stackblitz.com/edit/nuxt-starter-avneof?file=app.vue

wladiveras commented 7 months ago

you can enable dynamic icons too in docs talk about it.

noxsii commented 7 months ago

@wladiveras i try it. With: <UButton icon="i-flagpack-ad" size="sm" color="primary" variant="solid" label="Button" :trailing="false" dynamic />

and i get Cannot start nuxt: Icon collection "flagpack" not found. Please install @iconify-json/flagpack or @iconify/json .. check the stackblitz link :)

prpanto commented 7 months ago

@noxsii if you dont add it as a dependence it will never work. npm i @iconify-json/flagpack or npm i @iconify/json and it will work. just try it. i try it to your demo on stackblitz and works

This is no issue and I think it must be close it.

wladiveras commented 6 months ago

@noxsii a i dont have any package from iconify but i use like this.

in your app.config.ts export default defineAppConfig({ ui: { icons: { dynamic: true, }, });

and i use like this <UIcon :name="iconname" size="1.3rem" />

in https://icon-sets.iconify.design/line-md/moon-rising-alt-loop/ u can search a icon. image

and thats is my dependencies "dependencies": { "@formkit/auto-animate": "^0.8.1", "@nuxt/content": "^2.12.1", "@nuxt/ui-pro": "^1.0.2", "@nuxtjs/device": "^3.1.1", "@nuxtjs/fontaine": "^0.4.1", "@nuxtjs/google-fonts": "^3.2.0", "@nuxtjs/i18n": "^8.2.0", "@pinia-plugin-persistedstate/nuxt": "^1.2.0", "@pinia/nuxt": "^0.5.1", "@types/uuid": "^9.0.8", "@unovis/ts": "^1.3.5", "@unovis/vue": "^1.3.5", "@vueuse/motion": "^2.1.0", "@vueuse/nuxt": "^10.9.0", "animate.css": "^4.1.1", "date-fns": "^3.6.0", "maska": "^2.1.11", "nuxt": "^3.11.1", "pinia": "^2.1.7", "uuid": "^9.0.1", "v-calendar": "^3.1.2", "yup": "^1.4.0", "zod": "^3.22.4" }, "devDependencies": { "@nuxt/eslint-config": "^0.2.0", "@nuxt/image": "^1.4.0", "@nuxtjs/i18n": "^8.1.1", "@nuxtjs/supabase": "^1.1.7", "@nuxtjs/turnstile": "^0.6.3", "@types/node": "^20.11.30", "@typescript-eslint/eslint-plugin": "^7.3.1", "@typescript-eslint/parser": "^7.3.1", "eslint": "^8.57.0", "eslint-config-prettier": "^9.1.0", "eslint-plugin-prettier": "^5.1.3", "nuxt-security": "^1.2.2", "prettier": "^3.2.5", "sass": "^1.72.0", "typescript": "^5.4.3", "vue-tsc": "^2.0.7" }