How to use SVG's in a component

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

// In script

// By default, this is optimized with a package called SVGO
import SvgLogoUcla from "~/assets/svg/logo-ucla" 

// Note the ?raw. This will not be optimized.
import SvgLogoUclaRaw from "~/assets/svg/logo-ucla?raw" 

export default {
    components: {
        SvgLogoUcla,
        SvgLogoUclaRaw
    }
}

// In template
<svg-logo-ucla class="svg" />
<svg-logo-ucla-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, but you need ?url on the end of the path.

.foo {
    background-image: url(~/assets/svg/logo-ucla.svg?url);
}

The included ExampleComponent shows how to use an SVG too.

Exporting SVG from Adobe Illustrator

The settings you should use are: