Nuxt•5mo ago

Displaying an svg in an avatar using nuxt ui

Heyo! I'm trying to display an svg with a nuxt-ui component, however I'm unsure how to exactly use this The library I'm using, dicebear, give me an svg html, functions to generate a png or jpeg, a data uri, etc I've tried just piping the svg html into the avatar src but that doesn't work as it expects a url

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 5 5" fill="none" shape-rendering="crispEdges"><metadata xmlns:rd....

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 5 5" fill="none" shape-rendering="crispEdges"><metadata xmlns:rd....

How should I best display this? https://ui.nuxt.com/components/avatar#props

Nuxt UI

Avatar - Nuxt UI

Display an image that represents a resource or a group of resources.

3 Replies

DMLiquidity•5mo ago

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>

Nuxt

Nuxt-svgo · Nuxt Modules

Nuxt module to load optimized SVG files as Vue components

Wazbat•5mo ago

Oh thanks for that! I'll look into that I did however end up finding something that worked with dicebear, which was the toDataUri and toDataUriSync methods. They return a uri which is a valid src when passed into an Avatar component and it displayes it fine ...I don't know too much about this and haven't tested it, but from what I can see you can just base64 encode the svg html (using btoa) and then you have yourself a data uri which can be passed in as the src

const svg = '<svg>...';
const valueToDisplay = `data:image/svg+xml;base64,${btoa(svg)}`;
//...
<Avatar :src="valueToDisplay"/>

const svg = '<svg>...';
const valueToDisplay = `data:image/svg+xml;base64,${btoa(svg)}`;
//...
<Avatar :src="valueToDisplay"/>

You get the idea However this is only needed if the library you're using doesn't have a .toDataUri() method, however dicebear does

DMLiquidity•5mo ago

Yea nice.

Gaming

Programming

Displaying an svg in an avatar using nuxt ui