SVG and bitmap assets

src/
    ├── assets/
    .    └── logo.png
    └── svg/
        └── MyAsset.svg

Bitmap and static assets

You can use the assets under the asset folder normally in HTML, CSS and JS. Just use aliases to robustly refer to the right path regardless of the source file location:

<img src="~@assets/logo.png">

Using SVGs

This project template comes with tooling that compiles SVGs automatically. It's most convenient and robust to render SVG with a dedicated component so you don't need to worry about the details when using SVG assets in your views.

Example: <vector :src="my-asset" />

Any SVG is simply XML, and can be styled with CSS:

.c-my-component {
    .c-vector-my-asset {
        fill: $color-red;
    }
}

Some SVGs are designed to be dynamically colored with the current text color:

.c-my-component {
    color: $color-red;
    // no need to specify any SVG parameters
}

The designer has chosen how and which parts of the icon to apply this currentColor to. It might color the entire fill of the icon, or one or two strokes. Different elements in the icon might have also different opacities even if they use currentColor, resulting in the final rendered icon appearing as multicolor.

Read more about SVG compilation

Generated SVG

SVG code can be generated directly in a Vue component. This is not very convenient most of the time, but can be used to generate dynamic SVG graphics such as spinners and progress bars.

Example: <spinner>