holiverse-icon-font-plugin/build-font.js

Holiverse Icon Font Plugin * holiverse-icon-font-plugin - это плагин для генерации и использования иконок в формате шрифтов на основе SVG-файлов. Плагин позволяет легко подключать и использовать сгенерированные шрифты в Vue-проектах.

import svgtofont from 'svgtofont';
import path from 'path';
import fs from 'fs';

svgtofont({
    src: path.resolve(process.cwd(), './src/assets/icons'), // Путь к SVG-файлам
    dist: path.resolve(process.cwd(), './dist/fonts'), // Путь для сохранения
    fontName: 'my-icons', // Имя шрифта
    css: true, // Генерация CSS
    types: ['woff', 'woff2', 'ttf'], // Форматы шрифтов
    svgicons2svgfont: {
        fontHeight: 1000,
        normalize: true,
    },
}).then(() => {
    console.log('Шрифты успешно сгенерированы!');

    // Путь к сгенерированному CSS-файлу
    const cssFilePath = path.resolve(process.cwd(), './dist/fonts/my-icons.css');

    // Добавление дефолтного CSS-стиля с hover-эффектом
    const defaultStyles = `
/* Default styles for icons */
.my-icons {
  font-size: 24px;
  color: rgba(255, 255, 255, 0.4);
  transition: color 0.2s ease; /* Добавляем плавность смены цвета */
}

/* Hover effect */
.my-icons:hover {
  color: rgba(255, 255, 255, 1); /* Белый цвет при наведении */
}
`;

    // Чтение существующего CSS и добавление кастомного стиля
    fs.appendFileSync(cssFilePath, defaultStyles, 'utf8');
    console.log('Кастомные стили и hover-эффект добавлены в CSS.');
});