grunt m2webfont Download - grunt m2webfont Code Source Download

grunt m2webfont

Téléchargement de polices

1.0.0

Télécharger

Créer un webfont à partir des icônes SVG

Adapté pour magento 2

informations générales

Le package a été étendu de Grunt-Webfont et adapté à Magento 2 avec le moins de préprocesseur:
https://www.npmjs.com/package/grunt-webfont

Important

Ce plugin nécessite un grognement 0,4. Notez que ttfautohint est facultatif, mais votre police générée ne sera pas correctement laissée en évidence si elle n'est pas installée. Et assurez-vous de ne pas utiliser ttfautohint 0.97 car cette version ne fonctionnera pas.
Ce plugin nécessite une version de nœud <= 12
Si la version sera plus grande que vous aurez l'erreur:

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

fontforge n'est pas requis pour le moteur node .

Pour rétrograder votre version de nœud

Utilisez NVM

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

Pour OS X, vous pouvez utiliser Brew

 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

Installation

Premièrement pour tous les OS

 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

Fenêtre

Installez ttfautohint (facultatif).

Installez ensuite fontforge .

Téléchargez et installez FontForge.
Ajoutez C:Program Files (x86)FontForgeBuildsbin à votre variable d'environnement PATH .

Préparez les icônes SVG dans le dossier d'un thème

Ajoutez toutes les icônes SVG au dossier web/images/icons/font d'un thème créé.
Exemple:

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

Le module grunt-m2webfont fonctionnera pour tous les thèmes qui ont ajouté à

 dev/tools/grunt/configs/themes.js

ou

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

Si le fichier local-themes.js a été ajouté à un contenu du fichier grunt-config.json dans le dossier racine d'un projet.

Exécutez le module grogn-m2webfont

Exécutez simplement la commande dans un terminal:

 grunt m2webfont

Comment utiliser

Après importer et construire des styles, vous pouvez utiliser des mixins de styles ou des classes HTML pour ajouter une icône.

Remplacez le fragment {nom} au nom d'une icône.
Exemple: @od-icon-arrow-down

MOINS

Le mixin .od-icon(@od-icon-{name}) ajoutera des propriétés telles que: contenu et font-famille

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

Html

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

Problèmes

La police générée a des icônes cassées

Le moteur par défaut pour construire une police est le nœud dans le fichier de configuration du grunt pour enregistrer des dépendances minimales. Mais les icônes générées peuvent être brisées. Pour résoudre ce problème, vous devez changer le moteur du node en fontforge dans la configuration.

Juste pour commenter la ligne dans le fichier dev/tools/grunt/configs/m2webfont.js :

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

Si vous ne définissez pas le moteur sur les options, il aura un moteur de valeur par défaut: 'fontforge' .

Mais pour utiliser FontForge, vous devez installer le moteur sur votre système d'exploitation.
Voir les instructions ci-dessus ( installation ).
Il suffit de reconstruire les icônes après l'installation.