holiverse-icon-font-plugin v1.1.2
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.