DMLiquidity Comments - Answer Overflow

DMLiquidity

Posts Comments

NNuxt

•Created by Wazbat on 4/20/2024 in #❓・help

Displaying an svg in an avatar using nuxt ui

Yea nice.

5 replies

NNuxt

•Created by Wazbat on 4/20/2024 in #❓・help

Displaying an svg in an avatar using nuxt ui

Here is how I did it. I used https://nuxt.com/modules/nuxt-svgo

yarn add nuxt-svgo -D

yarn add nuxt-svgo -D

Then I Added it to my modules in nuxt.config.ts

   modules: [
    '@nuxt/content',
    '@nuxt/ui',
    '@nuxt/fonts',
    '@nuxthq/studio',
    'nuxt-og-image',
    'nuxt-svgo'
  ],
  svgo: {
    defaultImport: 'component'
  },

   modules: [
    '@nuxt/content',
    '@nuxt/ui',
    '@nuxt/fonts',
    '@nuxthq/studio',
    'nuxt-og-image',
    'nuxt-svgo'
  ],
  svgo: {
    defaultImport: 'component'
  },

Now out of the box it rendered my svg all white (I have no idea) but loading it as a component worked, so see the extra bit above.

svgo: {
    defaultImport: 'component'
  },

svgo: {
    defaultImport: 'component'
  },

Then I just used it as per the docs.

<script setup lang="ts">
import Logo from '~/assets/svg/cybercoretrans.svg';

const { header } = useAppConfig();
</script>

<script setup lang="ts">
import Logo from '~/assets/svg/cybercoretrans.svg';

const { header } = useAppConfig();
</script>

and

<template>
  <div class="flex w-full items-center justify-between"> <!-- Main container to space out major groups -->

    <!-- Container for Logo and img -->
    <div class="flex items-center space-x-4"> 
      <Logo />
    </div>

<template>
  <div class="flex w-full items-center justify-between"> <!-- Main container to space out major groups -->

    <!-- Container for Logo and img -->
    <div class="flex items-center space-x-4"> 
      <Logo />
    </div>

5 replies

NNuxt

•Created by DMLiquidity on 4/20/2024 in #❓・help

Why does Icon work and UIcon not.

So Failing forward here, I'll put a note here for others. After I had installed the both the game icons collection and the ALL collection, but was still unable to get UIcon to function as expected.

  "dependencies": {
    "@iconify-json/game-icons": "^1.1.9",
    "@iconify-json/heroicons": "^1.1.20",
    "@iconify-json/simple-icons": "^1.1.97",
    "@iconify/json": "^2.2.202",

  "dependencies": {
    "@iconify-json/game-icons": "^1.1.9",
    "@iconify-json/heroicons": "^1.1.20",
    "@iconify-json/simple-icons": "^1.1.97",
    "@iconify/json": "^2.2.202",

To make it work you have to use the right naming pattern. So

game-icons:evil-book

game-icons:evil-book

becomes

i-game-icons-evil-book

i-game-icons-evil-book

As noted at the very top of the page here. https://ui.nuxt.com/components/icon

5 replies

NNuxt

•Created by DMLiquidity on 4/20/2024 in #❓・help

Why does Icon work and UIcon not.

Ahh I see, thanks for the clear explanation on the icon handling. I'll install the icon collection.

5 replies

Gaming

Programming