Если у вас возникли трудности с настройкой встроенных SVG в вашем новом проекте Vue 3 и Vite, то вы попали в нужное место!

Установите плагин Vite SVG Loader

Этот плагин позволяет вам импортировать SVG как компонент Vue.

Установите vite-svg-loader plugin с помощью следующей команды:

npm i vite-svg-loader

в свой vite.config.ts добавьте только что установленный плагин SVGLoader:

import svgLoader from 'vite-svg-loader';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), svgLoader()],
})

Создайте многоразовый компонент SVG Vue

Для удобства мы можем создать повторно используемый компонент Vue для встраивания наших изображений SVG в наш HTML следующим образом:

<icon name="github-white"></icon>

Во-первых, мы начнем с кода компонента (в этом примере мы используем API композиции Vue):

// components/shared/icon.vue
<script setup>
  import { defineAsyncComponent } from 'vue';

  const props = defineProps({
    name: {
      type: String,
      required: true,
    }
  });

  // feel free to update this with an svg directory of your choice
  const icon = defineAsyncComponent(() =>
    import(`/src/assets/images/${props.name}.svg`)
  );
</script>

<template>
  <component :is="icon" class="fill-current" />
</template>

Как видите, мы используем defineAsyncComponent для загрузки SVG только тогда, когда это необходимо.

Теперь у нас есть возможность импортировать этот компонент по мере необходимости в наше приложение. Для удобства также возможен импорт этого компонента для глобального использования в вашем приложении.
Просто найдите файл, содержащий вызов функции createApp вашего приложения Vue, и импортируйте его следующим образом:

// src/main.ts
import { createApp } from 'vue';
import App from './App.vue';
import icon from './components/shared/icon.vue';

const app = createApp(App);

// importing our new icon component globally
app.component('icon', icon);

app.mount('#app');

и точно так же у нас есть многоразовый компонент icon, глобально настроенный в нашем приложении!

Использование нашего компонента SVG

Теперь давайте посмотрим, как этот компонент ведет себя в реальном мире.

В качестве примера, давайте запланируем включить значок GitHub SVG в наше приложение с помощью нашего недавно разработанного компонента icon.vue. Намерение состоит в том, чтобы также уменьшить размер SVG до 50 на 50 пикселей.

<div navigation__links>
  <icon name="github-white" width="50" height="50"></icon>
</div>

Как вы могли заметить из приведенного выше кода, атрибуты ширины и высоты можно включать напрямую, не указывая их явно как свойства icon.vue!

Однако, похоже, мы столкнулись с проблемой, когда наши пользовательские размеры 50x50 обрезают SVG:

Не нужно беспокоиться, есть простое решение!

Нам просто нужно открыть файл github-white.svg и добавить к нему атрибут viewBox следующим образом:

<svg viewBox="0 0 100 100" ... > </svg>

Когда это реализовано, содержимое тега SVG будет автоматически корректироваться в соответствии с заданной шириной и высотой тега SVG. Мы можем думать об этом как о настройке нашего телескопа, чтобы показать полное изображение.

Также хотел бы добавить, что если вы хотите избежать ручного редактирования, существует множество бесплатных онлайн-инструментов, которые могут автоматизировать редактирование svg для вас!
Вот пара, которые оказались полезными в моем опыте:

  • SVG Crop -> позволяет нам убрать пробелы и центрировать svg
  • SVG Ico -> может преобразовать вашу иконку svg в файл .ico — отлично подходит для обновления фавикона для использования на вашем веб-сайте!

Вот оно! Я надеюсь, что это дало вам полезную отправную точку для встраивания SVG в ваше приложение Vue. Спасибо, что нашли время, чтобы прочитать его!

Кредиты: