Во Vue 3 импортирование SVG осуществляется с использованием синтаксиса ES модулей и встроенного инструмента import() для динамической загрузки модуля.
Для начала, убедитесь, что файл SVG находится в доступной директории вашего проекта. Затем можно использовать один из следующих подходов для импортирования SVG.
1. Импортирование SVG как компонента Vue:
В данном подходе мы можем преобразовать SVG-файлы в компоненты Vue, которые затем можно использовать в шаблонах. Для этого создаем файл с расширением .vue и добавляем блок <template>, в котором располагается SVG-разметка.
<template>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<!-- SVG разметка -->
</svg>
</template>
<script>
export default {
name: 'SvgComponent',
}
</script>
Затем мы можем импортировать этот компонент в другую часть кода:
<template>
<div>
<SvgComponent />
</div>
</template>
<script>
import SvgComponent from '@/components/SvgComponent.vue'
export default {
name: 'MyComponent',
components: {
SvgComponent,
},
}
</script>
Теперь вы можете использовать <SvgComponent /> в шаблоне вашего компонента.
2. Использование директивы v-html:
Если вы хотите использовать SVG-разметку напрямую в шаблоне без преобразования в отдельный компонент, вы можете воспользоваться директивой v-html, которая позволяет рендерить HTML код из строки:
<template>
<div v-html="svgCode"></div>
</template>
<script>
import svgCode from '@/assets/svg/icon.svg'
export default {
name: 'MyComponent',
data() {
return {
svgCode,
}
},
}
</script>
В этом случае, мы импортируем содержимое SVG-файла в виде строки и сохраняем его в переменной svgCode. Затем мы используем директиву v-html для рендеринга SVG-кода.
3. Использование метода import()
Если у вас много SVG-файлов или вам требуется загружать SVG динамически, вы можете использовать метод import() для динамической загрузки SVG-файлов в виде модулей.
<template>
<div>
<div ref="svgContainer"></div>
</div>
</template>
<script>
export default {
name: 'MyComponent',
mounted() {
this.loadSvg()
},
methods: {
async loadSvg() {
const svgModule = await import('@/assets/svg/icon.svg')
const svgString = svgModule.default
this.$refs.svgContainer.innerHTML = svgString
},
},
}
</script>
В этом случае мы используем import() для загрузки SVG-файла в виде модуля. Затем мы сохраняем содержимое SVG-файла в переменную svgString и отображаем его в указанном контейнере с помощью innerHTML.
Так что в зависимости от ваших потребностей и предпочтений, вы можете выбрать один из этих подходов для импортирования SVG во Vue 3.