Използвайте SVG файлове като Vue компоненти с Vite

Блог

Използвайте SVG файлове като Vue компоненти с Vite

vite-plugin-svg

Разширете Vite с възможност за използване на SVG файлове като компоненти на Vue.

Характеристика:

  • SVGO оптимизация
  • Поддръжка за подмяна на горещ модул
  • Поддръжка за поведение при импортиране на SVG по подразбиране
Понастоящем поддържана версия на Vite:

1.0.0-rc.4

Инсталирай

yarn add --dev vite-plugin-svg npm i -D vite-plugin-svg

Употреба

Започвайки от | _+_ | за да използвате SVG файл като компонент, просто импортирайте | _+_ | от пътя на файла. Това ви дава по -голям контрол върху начина на зареждане и обработка на определен SVG файл:

как да промените шрифта на chrome
v0.4.0 VueComponent // Get URL to SVG file import myIconUrl from './svgs/my-icon.svg'; const img = document.createElement('img'); img.src = myIconUrl;

Настройвам

.my-icon { /* Get URL to SVG file */ background-image: url('./svgs/my-icon.svg'); }

import { VueComponent as MyIcon } from './svgs/my-icon.svg'; export default { components: { MyIcon, }, };

ВСИЧКО:

  • Конвертирайте приставката в TS
  • Поддръжка за деактивиране на SVGO
  • Основно покритие на теста

Подробности за изтегляне:

Автор: визуално фанатичен

Програмен код: https://github.com/visualfanatic/vite-plugin-svg

#vuejs #vue #javascript