Скачать grunt m2webfont - grunt m2webfont исходный код скачать

grunt m2webfont

Загрузка шрифта

1.0.0

Скачать

Создать веб -филонги из значков SVG

Адаптировано для Magento 2

Общая информация

Пакет была расширена от Grunt-Webfont и адаптирован к Magento 2 с меньшим количеством препроцессора:
https://www.npmjs.com/package/grunt-webfont

Важный

Этот плагин требует хрустящего 0,4. Обратите внимание, что ttfautohint является необязательным, но ваш сгенерированный шрифт не будет должным образом намек, если он не будет установлен. И убедитесь, что вы не используете ttfautohint 0.97, потому что эта версия не будет работать.
Этот плагин требует версии узла <= 12
Если версия будет больше, чем у вас будет ошибка:

 ttf2woff2.js:3 Invalid asm.js: Invalid member of stdlib

fontforge не требуется для двигателя node .

Чтобы понизить версию узла

Используйте NVM

https://github.com/nvm-sh/nvm/blob/master/readme.md

Для OS X вы можете использовать варево

 brew unlink node
brew install node@12
brew link --overwrite --dry-run node@12
echo 'export PATH="/usr/local/opt/node@12/bin:$PATH"' >> ~/.zshrc

Установка

Сначала для всех ОС

 npm install grunt-m2webfont --save-dev
// or
yarn add grunt-m2webfont

OS X.

 brew install ttfautohint fontforge --with-python

Linux

 sudo apt-get install fontforge ttfautohint

Окна

Установите ttfautohint (необязательно).

Затем установите fontforge .

Загрузите и установите Fontforge.
Добавить C:Program Files (x86)FontForgeBuildsbin в вариацию среды вашего PATH .

Приготовьте значки SVG в папке темы

Добавьте все значки SVG в папку web/images/icons/font созданной темы.
Пример:

 app/design/frontend/{vendor}/{theme}/web/images/icons/font/*.svg

Модуль grunt-m2webfont будет работать для всех тем, которые добавили к

 dev/tools/grunt/configs/themes.js

или

 dev/tools/grunt/configs/local-themes.js

Если файл local-themes.js был добавлен в содержимое файла grunt-config.json в корневой папке проекта.

Запустите модуль Grunt-M2Webfont

Просто запустите команду в терминале:

 grunt m2webfont

Как использовать

После импорта и стиля строительства вы можете использовать микшины Styles 'Mixins или HTML, чтобы добавить значок.

Замените фрагмент {имя} на имя значка.
Пример: @od-icon-arrow-down

МЕНЬШЕ

Mixin .od-icon(@od-icon-{name}) добавит свойства, такие как: Содержание и Фонт-Фамилия

 .class::before {
  .od-icon(@od-icon-{name});
}

HTML

 <i class="od-icon od-icon-{name}"></i>

Проблемы

Сгенерированный шрифт имеет сломанные значки

Двигатель по умолчанию для построения шрифта - это узел в файле конфигурации Grunt, чтобы сохранить минимальные зависимости. Но сгенерированные значки могут быть сломаны. Чтобы решить эту проблему, вам нужно изменить двигатель с node на fontforge в конфигурации.

Просто чтобы прокомментировать строку в файле dev/tools/grunt/configs/m2webfont.js :

 const options = {
  ...
  // engine: 'node',
}

Если вы не установите двигатель на параметры, то он будет иметь двигатель значения по умолчанию: 'fontforge' .

Но для использования Fontforge вам нужно установить двигатель в вашу ОС.
См. Инструкции выше ( установка ).
Просто перестройте значки после установки.