vite-plugin-vue-element-plus-icon

a vite plugin to load svg icon for element-plus

Why

Importing a svg file, you would get a url of file in vite

In most cases, we want a Vue component to render in page directly.

In element-plus, it supply a el-icon Element, and a built-in Svg resource library

Use your svg file, it`s not render properly, such as not supporting color attribute

So I create thie vite plugin to svg file, import as vue component, and optimize using for element-plus icon

Relative Resourece

• element-plus icon
• svgo
• vite
• vue

Requirements

• vite: ^3.0.0
• vue: ^3.2.13

Install

1// pnpm
2pnpm add vite-plugin-vue-element-plus-icon -D
3
4// npm
5npm install vite-plugin-vue-element-plus-icon -D
6
7// yarn
8yarn add vite-plugin-vue-element-plus-icon --D

Setup

vite.config.ts

1import vpvepi from 'vite-plugin-vue-element-plus-icon'
2
3export default defineConfig({
4  plugins: [vpvepi()],
5})

Use

1<script setup lang="ts">
2import Coffee from './coffee.svg'
3import CoffeeRaw from './coffee.svg?raw'
4import CoffeeUrl from './coffee.svg?url'
5</script>
6<template>
7  <div>
8    <!-- used in element-plus, support color, size attrs and etc -->
9    <el-icon color="red" class="is-loading" :size="100">
10      <Coffee />
11    </el-icon>
12  </div>
13  <div>
14    <CoffeeRaw />
15  </div>
16  <div>
17    {{ CoffeeUrl }}
18  </div>
19</template>

Query Options

component

default value

svg file will be imported as Vue component, with optimized for element-plus

1import CoffeeComp from './coffee.svg?component'
2// <CoffeeComp />

raw

svg file will be imported as Vue component, without optimized for element-plus

1import CoffeeRaw from './coffee.svg?raw'
2// <CoffeeRaw />

url

svg file will be imported as file path

1import CoffeeUrl from './coffee.svg?url'
2// {{ CoffeeUrl }}

Plugin Options

defaultQuery

1import vpvepi from 'vite-plugin-vue-element-plus-icon'
2
3export default defineConfig({
4  plugins: [
5    vpvepi({
6      defaultQuery: 'raw', // component(default value), url, raw
7    }),
8  ],
9})

svgoConfig

1import vpvepi from 'vite-plugin-vue-element-plus-icon'
2
3export default defineConfig({
4  plugins: [
5    vpvepi({
6      svgoConfig(path) {
7        // svgo config options
8        return {
9          multipass: true,
10        }
11      },
12    }),
13  ],
14})

use getDefaultSvgoOptions to get default svgo options, you can merge options from the return value

1import vpvepi, { getDefaultSvgoOptions } from 'vite-plugin-vue-element-plus-icon'
2
3export default defineConfig({
4  plugins: [
5    vpvepi({
6      svgoConfig(path) {
7        // svgo config options
8        const ops = getDefaultSvgoOptions(path)
9        return {
10          ...ops,
11          multipass: false,
12        }
13      },
14    }),
15  ],
16})

Svgo Plugin

you can use svg plugin svgo-plugin-replace-fill separately

it would replace fill attr directly

1import sprf from 'vite-plugin-vue-element-plus-icon/dist/svgo-plugin-replace-fill.cjs'
2
3vpvepi({
4  svgoConfig() {
5    return {
6      plugins: [sprf],
7    }
8  },
9}),

Inspired by vite-svg-loader

vite-svg-loader