Массовый импорт кастомных SVG иконок в VueJs проект.

npm зависимости: npm install -D unplugin-icons unplugin-vue-components @iconify/utils

unplugin-icons — «мозг» системы. Он берет ваши SVG-файлы и превращает их в готовые Vue-компоненты на лету. unplugin-vue-components — тот самый агент, который ищет теги типа в ваших шаблонах и автоматически импортирует их, чтобы вам не пришлось писать import в каждом файле. @iconify****/utils — вспомогательная библиотека, необходимая для корректной работы загрузчиков (особенно если вы используете свои папки с иконками).

Преимущества: Tree-shaking: Если в папке 100 иконок, а вы использовали одну — в код попадет только одна. Удобство: Достаточно просто закинуть новый .svg в папку, и он тут же доступен в шаблоне.

Если вы используете TypeScript, добавьте в ваш tsconfig.json в секцию compilerOptions.types следующую строку, чтобы IDE не ругалась на незнакомые компоненты:

"types": ["unplugin-icons/types/vue"]