jpkleemans / vite-svg-loader

Vite plugin to load SVG files as Vue components
MIT License
557 stars 59 forks source link

svg property changes #8

Closed MentalGear closed 3 years ago

MentalGear commented 3 years ago

Is it possible with this lib to change svg properties like fill color, border color, etc?

jpkleemans commented 3 years ago

Yes, you can use css to style the svg:

<template>
  <MyIcon class="icon" />
</template>

<style>
.icon path {
  fill: blue;
}
</script>
MentalGear commented 3 years ago

thanks man for the quick reply. One last thing: Does the plugin embed svgs into the main html file, or are they loaded on demand and cache-able ?

jpkleemans commented 3 years ago

You can lazy load them using defineAsyncComponent:

<template>
  <MyIcon />
</template>

<script setup>
import { defineAsyncComponent } from 'vue'
const MyIcon = defineAsyncComponent(() => import('./my-icon.svg'))
</script>

For more info, see https://v3.vuejs.org/guide/component-dynamic-async.html#async-components

MentalGear commented 3 years ago

Awesome

On 10 Feb 2021, at 15:28, Jan-Paul Kleemans notifications@github.com wrote:

Yes, you can lazy load them using defineAsyncComponent. See https://v3.vuejs.org/guide/component-dynamic-async.html#async-components https://v3.vuejs.org/guide/component-dynamic-async.html#async-components — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/jpkleemans/vite-svg-loader/issues/8#issuecomment-776744694, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAVUVG7WXY3MVTJCXJKY6X3S6KJYVANCNFSM4XM63LJQ.