Holiverse Icon Font Plugin

• holiverse-icon-font-plugin

• это плагин для генерации и использования иконок в формате шрифтов на основе SVG-файлов. Плагин позволяет легко подключать и использовать сгенерированные шрифты в Vue-проектах.

• Установка
• Установите плагин в ваш проект с помощью yarn или npm:

yarn add holiverse-icon-font-plugin

или

npm install holiverse-icon-font-plugin Генерация новых шрифтов Чтобы создать новые шрифты из SVG-иконок:

• Подготовьте SVG-файлы:

Поместите все SVG-файлы в папку icons/ вашего плагин-проекта. Названия файлов должны быть в формате имя_иконки.svg. Например:

icons/ home.svg user.svg settings.svg

• Запустите команду: yarn build После выполнения команды в папке dist/fonts появятся сгенерированные файлы:

dist/ fonts/ my-icons.css my-icons.woff my-icons.woff2 my-icons.ttf

• Добавьте новые SVG-файлы:

Если вам нужно добавить новые иконки, просто положите соответствующие SVG-файлы в папку icons/ и снова выполните команду yarn build

• Использование плагина в проекте
• Подготовьте файлы шрифтов:

Скопируйте файлы из dist/fonts/ вашего плагин-проекта в папку public/fonts/ вашего основного проекта:

public/ fonts/ my-icons.css my-icons.woff my-icons.woff2 my-icons.ttf Подключите плагин:

В main.js подключите плагин и укажите путь к файлу CSS:

import IconFontPlugin from 'holiverse-icon-font-plugin'; import { createApp } from 'vue'; import App from './App.vue';

const app = createApp(App);

app.use(IconFontPlugin, { fontPath: '/fonts/my-icons.css', // Путь к вашему CSS-файлу });

app.mount('#app'); Используйте иконки в компонентах:

Теперь вы можете использовать иконки в вашем проекте. Например:

• Примечания

Форматы шрифтов: Плагин генерирует файлы в форматах woff, woff2, и ttf. CSS-файл автоматически подключает их через @font-face. Добавление новых иконок: Чтобы добавить новую иконку, просто поместите SVG-файл в папку icons/ и выполните команду yarn build для обновления шрифтов. Кастомизация: Вы можете изменить конфигурацию шрифтов, редактируя файл svgtofont.config.js. Лицензия Этот плагин распространяется под лицензией MIT.