ZvSvg ​

ZvSvg is a standalone component display SVG files from string or local files

Basic usage ​

Render SVG as raw ​

With a SVG loader like vite-svg-loader, you can import your SVGs as a string raw

import yourSvg from '@/assets/svg/your-svg.svg?raw'

Then you can render your SVG with this component like this:

<ZvSvg :raw="yourSvg" />

Render SVG from local public files ​

Your SVG files muse be located in public directory or from web directly

<!-- From web -->
<ZvSvg src="https://zadig-et-voltaire.com/assets/zv-logo.svg" />
<!-- From local public directory -->
<ZvSvg src="/svg/zv-logo.svg" />

Apply color ​

The SVG should have the attribut fill="currentColor" and not have any color already set on each <path />

<ZvSvg src="/svg/logo.svg" class="text-gray-500" />

Sizing ​

Apply width and height with CSS ​

As for an image, simply use the CSS properties

<div class="flex gap-4 items-center bg-white p-4">
  <ZvSvg src="/logos/monogram.svg" class="h-16" />
  <ZvSvg src="/logos/monogram.svg" class="w-20" />
</div>

Set path globally ​

Set the default path of your local icons directory

import { createApp } from 'vue'
const app = createApp(App)

app.provide('zvSvgPath', '/your/custom/path')

Then, you can use the component with the name property only:

<ZvSvg name="cart" class="h-12" />
<ZvSvg name="back" class="h-12" />
<ZvSvg name="my-account-wishlist" class="h-12" />

Load SVG from no public directory ​

<template>
  <ZvSvg :raw="zvLogo" />
</template>

<script lang="ts" setup>
  import zvLogo from './../svg/logo.svg?raw'
</script>

Render SVG with raw string ​

<template>
  <ZvSvg :raw="svgRawSource" />
</template>

<script lang="ts" setup>
  const svgRawSource =
    '<svg width="26" height="18" viewBox="0 0 26 18" stroke="currentColor" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.4545 1L2 9L11.4545 17" stroke-width="1.6" /><path d="M2.36353 9H25.6363" stroke-width="1.6" /></svg>'
</script>