-
Notifications
You must be signed in to change notification settings - Fork 30
SVGs
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);
}