Для правильного подключения иконок через mix в проекте, необходимо выполнить несколько шагов.
Шаг 1: Установка необходимых зависимостей
В первую очередь, убедитесь, что в проекте уже установлен Laravel Mix. Если он еще не установлен, выполните команду npm install laravel-mix.
Далее установите пакет laravel-mix-svg-sprite, который позволит собирать спрайт иконок. Выполните команду npm install laravel-mix-svg-sprite.
Шаг 2: Настройка Webpack.mix.js
Откройте файл webpack.mix.js в корневой директории вашего проекта. В этом файле будет содержаться конфигурация Laravel Mix.
Добавьте следующий код в файл webpack.mix.js:
const mix = require('laravel-mix');
require('laravel-mix-svg-sprite');
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.svgSprite('resources/svg', 'public/svg');
В этом примере мы настраиваем компиляцию JavaScript и Sass файлов, а также создание спрайта из SVG иконок. Файлы иконок должны находиться в директории resources/svg, а готовый спрайт будет сохранен в public/svg.
Шаг 3: Использование иконок в проекте
После настройки Webpack.mix.js, вы можете использовать иконки в вашем проекте. Для этого в публичной директории будет создан спрайт sprite.svg, который вы можете подключить к странице.
Чтобы использовать иконки, добавьте следующий код в ваш HTML файл:
<svg>
<use xlink:href="/svg/sprite.svg#icon-name"></use>
</svg>
Где icon-name - это имя иконки, которое вы хотите использовать.
Шаг 4: Компиляция иконок
Для компиляции иконок, запустите команду npm run dev в корневой директории вашего проекта. Эта команда скомпилирует JavaScript и Sass файлы и создаст спрайт иконок.
Если вы хотите автоматическую перекомпиляцию при изменении файлов, можете использовать команду npm run watch.
В итоге, вы должны получить подключенные иконки на вашей странице, а также нормализованный и сжатый спрайт в директории public/svg.
Надеюсь, эта информация поможет вам правильно подключить и использовать иконки через Laravel Mix и webpack.