# How to change logo

# TL;DR 🎯

Import SVG with ?raw as prefix

import logo from '@/assets/logo.svg?raw'

use below logo config:

logo: h('div', { innerHTML: logo, class: 'text-primary' }),

Import your logo

import logo from '@/assets/logo.png'

use below logo config:

logo: h('img', { src: logo, alt: 'app-logo' }),

We use VNode to render logo. This allows using image formats like png, jpeg, etc, along with SVG format.

If you notice we change the color of the logo as well when you change the primary color of the theme.

For this we need an SVG image and it should not be rendered as <img /> tag.

However, someone might have png or jpeg instead of SVG in this case we need <img /> tag.

Hence, we need a mechanism which handles both SVG rendering and <img /> tag rendering.

We used VNode (opens new window) to give full flexibility in theme config to render the logo however you like.

Check tl;dr section to understand how to pass SVG and other image formats as logo.

You can read more about VNode in Vue's official docs (opens new window).

We learned how to configure the logo properly. Now, to use it you need VNodeRenderer component from layouts plugin.

First import this component:

import { VNodeRenderer } from '@layouts/components/VNodeRenderer'
import { themeConfig } from '@themeConfig'

And use it in your template:

<template>
    <VNodeRenderer :nodes="themeConfig.app.logo" />
</template>

Moreover, you can also pass other attributes like a normal div 😍

<template>
    <VNodeRenderer :nodes="themeConfig.app.logo" class="me-3" />
</template>