Comments (7)
Can you handle this by creating a PR?
from nuxt-ui-vue.
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.
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.
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.
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.
PR #145
from nuxt-ui-vue.
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)
- Button variants not getting applied HOT 2
- image validation error
- Recommend use Symbol as globalVariant key
- Cannot import composables HOT 2
- Notifications not implemented HOT 1
- Many transitions not work well HOT 3
- Form HOT 2
- nuxtlabsTheme resolve error when use vite build HOT 1
- remove `lodash-es` as a runtime dependency
- changing some props in custom theme has no effect HOT 4
- Release v2.0
- Failed resolve of `UIcon` in `USelect` component HOT 1
- pro components HOT 1
- AvatarGroup
- Questions about your workflow and plan for the future HOT 4
- Npm package name HOT 1
- rename package
- Cannot find module `nuxt-ui-vue/dist/theme/nuxtlabsTheme` or its corresponding type declarations.
- Migration issues from nuxt-ui to nuxt-ui-vue HOT 4
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from nuxt-ui-vue.