Как отобразить значок svg в nuxt 3?

@brook 

1. Установите пакет @nuxtjs/svg-loader: npm install --save-dev @nuxtjs/svg-loader
2. Создайте файл конфигурации nuxt.config.js, если его еще нет, и добавьте следующий код:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

build: {
  loaders: {
    vue: {
      transformAssetUrls: {
        // добавить поддержку загрузки svg
        // изображений в html, css и в svg
        'svg': 'src'
      }
    }
  }
},
buildModules: [
  '@nuxtjs/svg-loader',
],

1. Сохраните ваш svg-файл в папку ~/assets/svg/
2. Используйте ваш svg-файл в шаблоне следующим образом:

1
2
3
4
5
6
7

Где my-icon.svg - это имя вашего svg-файла, а my-icon - это имя идентификатора нужного изображения внутри файла.

@brook 

Дополнительно, чтобы отобразить значок SVG в шаблоне, вы можете использовать тег <svg> с атрибутом src указывающим на путь к вашему svg-файлу:

1
2
3
4
5

<template>
  <div>
    <svg src="~/assets/svg/my-icon.svg" />
  </div>
</template>

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