Vue: добавление графического изображения иконки | html

Добавил(а) microsin

Для оформления сайта часто необходимо добавлять на него растровые или векторные картинки. Для этого есть несколько способов, показанные далее на примере добавления иконки на кнопку.

Исходный компонент кнопки (файл src/components/Button.vue), в который мы будем добавлять картинку:

< script setup>< /script>
< template>
    < button class="button">
        < slot name="icon">< /slot>
        < slot>< /slot>
    < /button>
< /template>

< style scoped>
.button {
    border: none;
    border-radius: 10px;
    background: var(--gradient);
    padding: 14px;
    font-family: var(--font);
    font-size: 20px;
    font-weight: 600;
    color: var(--primary);
    cursor: pointer;
    /* для выравнивания содержимого кнопки по вертикали: */
    display: flex;
    align-items: center;
}

.button:hover {
    background: var(--gradient-inverted);
}
< /style>

[Способ1: вставка иконки с помощью символа UTF-8]

Этот способ ограничен набором графических символов UTF-8 (см. [2]). Просто добавьте код символа как текст кнопки (на примере символа ) при передаче его из родительского компонента в дочерний:

// Компонент приложения App.vue:
< script setup>
import MyButton from "./components/Button.vue"
< /script>

< template>
  < main class="main">
    < MyButton>
      < template #icon>< /template>
       Сохранить
    < /MyButton>
  < /main>
< /template>

< style scoped>
.main {
  background: var(--color-bg-main);
  padding: 60px 50px;
  border-radius: 25px;
}
< /style>

[Способ2: вставка картинки SVG как HTML]

Предположим, что у нас есть вот такая картинка (файл myButtonIcon.svg):

< svg width="33" height="33" viewBox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg">
< path fill-rule="evenodd" clip-rule="evenodd" d="M9.96875 13.75C9.96875 10.1429 12.8929 7.21875
  16.5 7.21875C20.1071 7.21875 23.0313 10.1429 23.0313 13.75C23.0313 17.3571 20.1071 20.2812
  16.5  20.2812C12.8929 20.2812 9.96875 17.3571 9.96875 13.75ZM16.5 9.28125C14.032 9.28125
  12.0313 11.282  12.0313 13.75C12.0313 16.218 14.032 18.2188 16.5 18.2188C18.968 18.2188 20.9688
  16.218 20.9688  13.75C20.9688 11.282 18.968 9.28125 16.5 9.28125Z" fill="white"/>
< path fill-rule="evenodd" clip-rule="evenodd" d="M4.846 12.1782C5.3332 6.26758 10.2724 1.71875
  16.203 1.71875H16.797C22.7276 1.71875 27.6668 6.26758 28.154 12.1782C28.4157 15.3532 27.435
  18.506 25.4183 20.9723L18.8278 29.0322C17.6247 30.5036 15.3753 30.5036 14.1722 29.0322L7.5817
  20.9723C5.56505 18.506 4.58429 15.3532 4.846 12.1782ZM16.203 3.78125C11.3458 3.78125 7.30055
  7.50678 6.90153 12.3476C6.68371 14.9901 7.49997 17.6141 9.17838 19.6667L15.7688 27.7267C16.1467 
  28.1888 16.8533 28.1888 17.2312 27.7267L23.8216 19.6667C25.5 17.6141 26.3163 14.9901 26.0985
  12.3476C25.6995 7.50678 21.6542 3.78125 16.797 3.78125H16.203Z" fill="white"/>
< /svg>

Теперь можно вставить иконку напрямую в шаблон template компонента кнопки напрямую с помощью тега svg:

// Файл компонента приложения App.vue:
< template>
  < main class="main">
    < MyButton>
      < template #icon>< /template>
        < svg width="33" height="33" viewBox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg">
        < path fill-rule="evenodd" clip-rule="evenodd" d="M9.96875 13.75C9.96875 10.1429 12.8929 7.21875
         16.5 7.21875C20.1071 7.21875 23.0313 10.1429 23.0313 13.75C23.0313 17.3571 20.1071 20.2812 16.5
         20.2812C12.8929 20.2812 9.96875 17.3571 9.96875 13.75ZM16.5 9.28125C14.032 9.28125 12.0313 11.282
         12.0313 13.75C12.0313 16.218 14.032 18.2188 16.5 18.2188C18.968 18.2188 20.9688 16.218 20.9688
         13.75C20.9688 11.282 18.968 9.28125 16.5 9.28125Z" fill="white"/>
        < path fill-rule="evenodd" clip-rule="evenodd" d="M4.846 12.1782C5.3332 6.26758 10.2724 1.71875
         16.203 1.71875H16.797C22.7276 1.71875 27.6668 6.26758 28.154 12.1782C28.4157 15.3532 27.435
         18.506 25.4183 20.9723L18.8278 29.0322C17.6247 30.5036 15.3753 30.5036 14.1722 29.0322L7.5817
         20.9723C5.56505 18.506 4.58429 15.3532 4.846 12.1782ZM16.203 3.78125C11.3458 3.78125 7.30055
         7.50678 6.90153 12.3476C6.68371 14.9901 7.49997 17.6141 9.17838 19.6667L15.7688 27.7267C16.1467
         28.1888 16.8533 28.1888 17.2312 27.7267L23.8216 19.6667C25.5 17.6141 26.3163 14.9901 26.0985
         12.3476C25.6995 7.50678 21.6542 3.78125 16.797 3.78125H16.203Z" fill="white"/>
        < /svg> Сохранить
    < /MyButton>
  < /main>
< /template>

Такой способ работает, но его недостаток в том, что он засоряет код компонента. Поэтому альтернативно лучше добавить иконку из файла. Для этого сохраните файл myButtonIcon.svg в папку src/assets/, после чего вставьте в шаблон template с помощью атрибута img:

// Файл компонента приложения App.vue:
< template>
  < main class="main">
    < MyButton>
      < template #icon>< /template>
        < img src="./assets/myButtonIcon.svg" alt="Иконка локации">
        Сохранить
    < /MyButton>
  < /main>
< /template>

[Способ3: использование загрузчика]

Существуют компоненты для загрузки SVG, например vue-svg-loader [3]. Недостаток этого способа в том, что добавляется внешняя зависимость, которую нужно настраивать. Процесс настройки обычно описан на странице компонента.

[Способ4: вставка компонента]

Создайте файл компонента для иконки (например src/icons/IconLocation.vue):

< script setup>< /script>

< template>
    < svg width="33" height="33" viewBox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg">
        < path fill-rule="evenodd"
        clip-rule="evenodd"
        d="M9.96875 13.75C9.96875 10.1429 12.8929 7.21875
         16.5 7.21875C20.1071 7.21875 23.0313 10.1429 23.0313 13.75C23.0313 17.3571 20.1071 20.2812 16.5
         20.2812C12.8929 20.2812 9.96875 17.3571 9.96875 13.75ZM16.5 9.28125C14.032 9.28125 12.0313 11.282
         12.0313 13.75C12.0313 16.218 14.032 18.2188 16.5 18.2188C18.968 18.2188 20.9688 16.218 20.9688
         13.75C20.9688 11.282 18.968 9.28125 16.5 9.28125Z"
        fill="white"/>
        < path fill-rule="evenodd"
        clip-rule="evenodd"
        d="M4.846 12.1782C5.3332 6.26758 10.2724 1.71875
         16.203 1.71875H16.797C22.7276 1.71875 27.6668 6.26758 28.154 12.1782C28.4157 15.3532 27.435
         18.506 25.4183 20.9723L18.8278 29.0322C17.6247 30.5036 15.3753 30.5036 14.1722 29.0322L7.5817
         20.9723C5.56505 18.506 4.58429 15.3532 4.846 12.1782ZM16.203 3.78125C11.3458 3.78125 7.30055
         7.50678 6.90153 12.3476C6.68371 14.9901 7.49997 17.6141 9.17838 19.6667L15.7688 27.7267C16.1467
         28.1888 16.8533 28.1888 17.2312 27.7267L23.8216 19.6667C25.5 17.6141 26.3163 14.9901 26.0985
         12.3476C25.6995 7.50678 21.6542 3.78125 16.797 3.78125H16.203Z" fill="white"/>
    < /svg>
< /template>

В файле компонента приложения добавьте его импорт:

// App.vue
< script setup>
import MyButton from "./components/Button.vue"
import IconComponent from "./icons/IconLocation.vue"
< /script>

И вставьте его как компонент в шаблон:

// App.vue
< template>
  < main class="main">
    < MyButton>
      < template #icon>< /template>
        < IconComponent />
        Сохранить
    < /MyButton>
  < /main>
< /template>

[Ссылки]

1. Vue 3, быстрый старт.
2. WHEN TEXT IS NOT ENOUGH site:symbl.cc.
3. vue-svg-loader site:js.org.