vite-plugin-vue-svg-reactive-loader
TypeScript icon, indicating that this package has built-in type declarations

0.0.3 • Public • Published

English | 简体中文


😊 based on vite-svg-loader.


vite-plugin-vue-svg-reactive-loader

Vite 2.x plugin, loads SVG files as Vue components, and automatically adds the viewBox attribute to the svg, so that the svg can be adaptively zoomed.

Version Downloads License

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

<script setup>
import MyIcon from './my-icon.svg'
</script>

<style scoped>
.my-icon {
    height: 14px;
    width: 14px;
    fill: aqua;
}
</style>

Install

npm install vite-plugin-vue-svg-reactive-loader --save-dev

Setup

vite.config.js

import svgReactiveLoader from "vite-plugin-vue-svg-reactive-loader"

export default {
  plugins: [vue(), svgReactiveLoader()],
}

Use with TypeScript

If you use the loader in a Typescript project, you might get warnings like Type 'string' is not assignable to type 'Component'. To fix this you'll need to add the following type definitions to your compiler options:

tsconfig.json

{
  "compilerOptions": {
    "types": ["vite-plugin-vue-svg-reactive-loader",, "vite/client"]
  }
}

Package Sidebar

Install

npm i vite-plugin-vue-svg-reactive-loader

Weekly Downloads

0

Version

0.0.3

License

MIT

Unpacked Size

7.19 kB

Total Files

7

Last publish

Collaborators

  • liuwenxing