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

Пользователь

от brook , в категории: JavaScript , год назад

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от nicola , год назад

@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 - это имя идентификатора нужного изображения внутри файла.

Пользователь

от clifford , месяц назад

@brook 

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

1
2
3
4
5
<template>
  <div>
    <svg src="~/assets/svg/my-icon.svg" />
  </div>
</template>


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