Code Monkey home page Code Monkey logo

Comments (7)

selemondev avatar selemondev commented on June 6, 2024 1

Can you handle this by creating a PR?

from nuxt-ui-vue.

selemondev avatar selemondev commented on June 6, 2024

Yes, it does work. Here is an example:

<script setup lang='ts'>
import { addCollection } from '@iconify/vue';

addCollection({
	prefix: 'mdi',
	icons: {
		'account-box': {
			body: '<path d="M6 17c0-2 4-3.1 6-3.1s6 1.1 6 3.1v1H6m9-9a3 3 0 0 1-3 3a3 3 0 0 1-3-3a3 3 0 0 1 3-3a3 3 0 0 1 3 3M3 5v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2z" fill="currentColor"/>',
		},
		'account-cash': {
			body: '<path d="M11 8c0 2.21-1.79 4-4 4s-4-1.79-4-4s1.79-4 4-4s4 1.79 4 4m0 6.72V20H0v-2c0-2.21 3.13-4 7-4c1.5 0 2.87.27 4 .72M24 20H13V3h11v17m-8-8.5a2.5 2.5 0 0 1 5 0a2.5 2.5 0 0 1-5 0M22 7a2 2 0 0 1-2-2h-3c0 1.11-.89 2-2 2v9a2 2 0 0 1 2 2h3c0-1.1.9-2 2-2V7z" fill="currentColor"/>',
		},
		'account': {
			body: '<path d="M12 4a4 4 0 0 1 4 4a4 4 0 0 1-4 4a4 4 0 0 1-4-4a4 4 0 0 1 4-4m0 10c4.42 0 8 1.79 8 4v2H4v-2c0-2.21 3.58-4 8-4z" fill="currentColor"/>',
		},
		'home': {
			body: '<path d="M10 20v-6h4v6h5v-8h3L12 3L2 12h3v8h5z" fill="currentColor"/>',
		},
	},
	width: 24,
	height: 24,
});
</script>

<template>
  <div class="grid place-items-center w-full min-h-screen">
      <UIcon name="mdi:account-box" />
  </div>
</template>

from nuxt-ui-vue.

cuiyajie avatar cuiyajie commented on June 6, 2024

I have tested your demo, if I change the prefix or icons body, the icon show incorrectly. It seems like the UIcon loads svg from iconify library not from custom defination.

from nuxt-ui-vue.

cuiyajie avatar cuiyajie commented on June 6, 2024

I check the code of UIcon in nuxt-ui-vue import { Icon } from '@iconify/vue/dist/offline', I think we should use import { Icon } from '@iconify/vue' for custom iconset.

from nuxt-ui-vue.

cuiyajie avatar cuiyajie commented on June 6, 2024

I find @iconfiy/vue create a global variable dataStorage to store the custom icons. If I call addCollections from @iconfiy/vue in my code, it will create another dataStorage which is not shared with previous one in nuxt-ui-vue. we should expose the functions from @iconfiy/vue.

from nuxt-ui-vue.

cuiyajie avatar cuiyajie commented on June 6, 2024

PR #145

from nuxt-ui-vue.

selemondev avatar selemondev commented on June 6, 2024

Thanks for your contribution and this issue has been successfully resolved with the latest release of Nuxt UI Vue v1.0.1-beta.4

from nuxt-ui-vue.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.