grunt m2webfont Download - grunt m2webfont Código fonte download

grunt m2webfont

Baixar fonte

1.0.0

Baixar

Crie webfont a partir de ícones SVG

Adaptado para Magento 2

informações gerais

O pacote foi estendido de Grunt-Webfont e adaptado ao Magento 2 com o menos pré-processador:
https://www.npmjs.com/package/grunt-webfont

Importante

Este plug -in requer grunhido 0.4. Observe que ttfautohint é opcional, mas sua fonte gerada não será sugerida corretamente se não estiver instalada. E certifique -se de não usar ttfautohint 0,97 porque essa versão não funcionará.
Este plugin requer versão do nó <= 12
Se a versão for maior, você terá o erro:

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

fontforge não é necessário para o motor node .

Para rebaixar sua versão do nó

Use NVM

https://github.com/nvmh/nvm/blob/master/readme.md

Para o OS X, você pode usar 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

Instalação

Primeiro para todos os sistemas operacionais

 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

Windows

Instale ttfautohint (opcional).

Em seguida, instale fontforge .

Faça o download e instale o FontForge.
Adicione C:Program Files (x86)FontForgeBuildsbin à sua variável de ambiente PATH .

Prepare os ícones SVG na pasta de um tema

Adicione todos os ícones SVG à web/images/icons/font da pasta de um tema criado.
Exemplo:

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

O módulo grunt-m2webfont será executado para todos os temas que adicionaram

 dev/tools/grunt/configs/themes.js

ou

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

Se o arquivo local-themes.js foi adicionado a um conteúdo do arquivo grunt-config.json na pasta raiz de um projeto.

Execute o módulo Grunt-M2WebFont

Basta executar o comando em um terminal:

 grunt m2webfont

Como usar

Depois de importar e construir estilos, você pode usar as classes Mixins ou HTML dos Styles para adicionar um ícone.

Substitua o fragmento {nome} pelo nome de um ícone.
Exemplo: @od-icon-arrow-down

MENOS

O mixin .od-icon(@od-icon-{name}) adicionará propriedades como: conteúdo e família de fontes

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

Html

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

Problemas

Fonte gerada tem ícones quebrados

O mecanismo padrão para construir uma fonte é o nó no arquivo de configuração do Grunt para salvar as dependências mínimas. Mas os ícones gerados podem ser quebrados. Para corrigir esse problema, você precisa alterar o mecanismo do node para fontforge na configuração.

Só para comentar a linha no arquivo dev/tools/grunt/configs/m2webfont.js :

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

Se você não definir o mecanismo como opções, ele terá um mecanismo de valor padrão: 'fontforge' .

Mas para usar o FontForge, você precisa instalar o mecanismo no seu sistema operacional.
Veja as instruções acima ( instalação ).
Apenas reconstrua os ícones após a instalação.