Подключение плагина `vue-svg-sprite` в Vue 3 предполагает правильную настройку и инициализацию. Судя по вашему коду, основные шаги уже выполнены, однако есть несколько моментов, которые стоит проверить.
### 1. Проверьте структуру проекта
Убедитесь, что файл `sprite.svg` действительно находится по указанному пути `./assets/icon/sprite.svg`. Это путь относительно корневой папки вашего проекта, и если у вас другая структура, укажите правильный путь.
### 2. Убедитесь, что иконки корректно добавлены в `sprite.svg`
Откройте файл `sprite.svg` и убедитесь, что в нем есть необходимые структуры `symbol` с атрибутами `id`. Пример правильно сформированного `sprite.svg`:
```xml
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="tonicon" viewBox="0 0 32 32">
<path d="..."/>
</symbol>
<symbol id="icon-home-page" viewBox="0 0 32 32">
<path d="..."/>
</symbol>
</svg>
```
### 3. Проверьте импорт и использование плагина
Ваш код в `main.js` выглядит верно, однако убедитесь, что вы импортируете и используете Vue и плагин в правильном порядке. Пример `main.js`:
```javascript
import { createApp } from 'vue';
import App from './App.vue';
import * as SvgSprite from 'vue-svg-sprite';
const app = createApp(App);
app.use(SvgSprite, {
url: './assets/icon/sprite.svg',
class: 'svg-icon',
});
app.mount('#app');
```
### 4. Использование компонент `<svg-icon>`
Так как вы используете `vue-svg-sprite`, для вывода иконок используются компоненты `<svg-icon>`. Убедитесь, что ваш код в компоненте, где вы хотите использовать иконки:
```html
<template>
<div>
<svg-icon name="tonicon" class="icon" style="color: #000; width: 20px" />
<svg-icon name="icon-home-page" class="icon" style="color: #000; width: 20px" />
</div>
</template>
```
### 5. Проверка консоли и решения проблем
Если иконки не отображаются:
- Откройте инструменты разработчика в браузере (обычно F12).
- Проверьте консоль на наличие ошибок, связанных с загрузкой `sprite.svg` или других ресурсов.
- Убедитесь, что `sprite.svg` загружается правильно, перейдя по пути `http://localhost:3000/assets/icon/sprite.svg` (или другой, если вы хостите на другом порту).
### 6. Не забудьте стили
Если иконки загружаются, но все равно не видны, убедитесь, что они не скрыты стилями. Используйте правильные классы и стили.
### Заключение
Если вы внимательно проверите все шаги в своей конфигурации, и иконки по-прежнему не отображаются, возможно, стоит обратиться к документации плагина или на специализированные форумы для более глубокого анализа проблемы.