Skip to content
Drew Baker edited this page Apr 25, 2021 · 1 revision

The theme includes an SVG as component loader. This means you can use any SVG as you would a regular component. For example:

// In script
import SvgLogoFunkhaus from "~/assets/svg/logo-funkhaus" // By default, this is optimized with SVGO
import SvgLogoFunkhausRaw from "~/assets/svg/logo-funkhaus?raw" // Note the ?raw. This will not be optimized.

export default {
    components: {
        SvgLogoFunkhaus,
        SvgLogoFunkhausRaw
    }
}

// In template
<svg-logo-funkhaus class="svg" />
<svg-logo-funkhaus-raw class="svg" />

If you want to use an SVG in your CSS file, you can do it like below. Note you don't have to import the SVG, and you need ?url on the end of the path.

.foo {
    background-image: url(~/assets/svg/logo-funkhaus.svg?url);
}
Clone this wiki locally