https://github.com/r3dDoX/vite-plugin-svgo

Vite plugin to import and compress svg files with SVGO
https://github.com/r3dDoX/vite-plugin-svgo

Last synced: about 2 months ago
JSON representation

Vite plugin to import and compress svg files with SVGO

• Host: GitHub
• URL: https://github.com/r3dDoX/vite-plugin-svgo
• Owner: r3dDoX
• Created: 2022-10-15T11:56:12.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2024-09-26T11:59:56.000Z (8 months ago)
• Last Synced: 2025-03-11T17:02:12.588Z (about 2 months ago)
• Language: TypeScript
• Size: 113 KB
• Stars: 33
• Watchers: 3
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• fucking-awesome-vite - vite-plugin-svgo - Load SVGs as plain string and transform with SVGO library. (Plugins / Framework-agnostic Plugins)
• awesome-vite - vite-plugin-svgo - Load SVGs as plain string and transform with SVGO library. (Plugins / Framework-agnostic Plugins)

README

        
# Vite Plugin SVGO

> Vite plugin to load and optimize SVG files as raw string. For the optimization SVGO is used.

![npm](https://img.shields.io/npm/dt/vite-plugin-svgo?style=flat-square)

![GitHub package.json version](https://img.shields.io/github/package-json/v/r3dDoX/vite-plugin-svgo?color=brightgreen&style=flat-square)

```typescript

// Lit-Element example

import {html, unsafeSVG} from 'lit';

import icon from '../assets/icon.svg';

html`

  
${unsafeSVG(icon)}

`;

```


## Install

```

npm install -D vite-plugin-svgo

```

## Setup

```typescript

import svg from 'vite-plugin-svgo'

export default defineConfig({

  plugins: [svg()]

})

```

## SVGO Configuration

The plugin accepts custom optimize options.

```typescript

// vite.config.ts

svg({

  multipass: true,

  plugins: [

    {

      name: 'preset-default',

      params: {

        overrides: {

          convertColors: {

            currentColor: true,

          },

        },

      },

    },

  ],

})

```