Если у вас возникли трудности с настройкой встроенных 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. Спасибо, что нашли время, чтобы прочитать его!
Кредиты:
- Фото Яна Марудова на Unsplash