grunt m2webfont
1.0.0
El paquete se ha extendido desde Grunt-Webfont y adaptado a Magento 2 con el menos preprocesador:
https://www.npmjs.com/package/grunt-webfont
ttfautohint es opcional, pero su fuente generada no se insinuará correctamente si no está instalada. Y asegúrese de no usar ttfautohint 0.97 porque esa versión no funcionará. ttf2woff2.js:3 Invalid asm.js: Invalid member of stdlib
fontforge no es necesario para el motor node .https://github.com/nvm-sh/nvm/blob/master/readme.md
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
brew install ttfautohint fontforge --with-python
sudo apt-get install fontforge ttfautohint
Instale ttfautohint (opcional).
Luego instale fontforge .
C:Program Files (x86)FontForgeBuildsbin a su variable de entorno PATH . Agregue todos los iconos SVG a la carpeta web/images/icons/font de un tema creado.
Ejemplo:
app/design/frontend/{vendor}/{theme}/web/images/icons/font/*.svg
El módulo grunt-m2webfont se ejecutará para todos los temas que se agregaron a
dev/tools/grunt/configs/themes.js
o
dev/tools/grunt/configs/local-themes.js
Si el archivo local-themes.js se agregó a un contenido del archivo grunt-config.json en la carpeta raíz de un proyecto.
Simplemente ejecute el comando en una terminal:
grunt m2webfont
Después de importar y construir estilos, puede usar las clases Mixins o HTML de Styles para agregar un icono.
Reemplace el fragmento {nombre} al nombre de un icono.
Ejemplo: @od-icon-arrow-down
La mezcla .od-icon(@od-icon-{name}) agregará propiedades como: contenido y fuente de fuentes
.class::before {
.od-icon(@od-icon-{name});
}
<i class="od-icon od-icon-{name}"></i>
El motor predeterminado para construir una fuente es el nodo en el archivo de configuración del Grunt para guardar las dependientes mínimas. Pero los iconos generados pueden estar rotos. Para solucionar este problema, debe cambiar el motor de node a fontforge en la configuración.
Solo para comentar la fila en el archivo dev/tools/grunt/configs/m2webfont.js :
const options = {
...
// engine: 'node',
}
Si no establece el motor en opciones, entonces tendrá un motor de valor predeterminado: 'fontforge' .
Pero para usar FontForge, necesita instalar el motor en su sistema operativo.
Consulte las instrucciones anteriores ( instalación ).
Simplemente reconstruya los íconos después de la instalación.
Degradar su versión de nodo a 12.
Ver instrucciones anteriores ( importante ).
