Automatizar a criação de iconfont

[felipefialho]

Pessoal, estão usando algum plugin de Grunt, Gulp ou até PostCSS para automatizar essa tarefa?

Ainda faço tudo manualmente:

• Vou no site do Icomoon
• Gero o pacote
• Salvo o json

E em toda modificação preciso substituir o CSS, as fontes e o json novamente. Meio chato.

Que solução estão usando?

[iamgbayer]

Passo por esse processo também, estou acompanhando a issue.

[napalmdev]

Aqui o mesmo processo chato hahahah =/

[diogomoretti]

Esse processo chato também, porém, não vejo uma automação para isso!

[felipefialho]

Já vi algumas pessoas falando que usam plugin para automatizar esse processo, inclusive com libs do icomoon.

Queria muito uma solução para isso.

[matheuslc]

Não daria para fazer um plugin do gulp para automatizar isso? Tipo passa um array com os icones e ele faz o resto.

[abnersajr]

Uso o Iconmoon app também. Tenho uma conta cadastrada, crio um projeto cada vez.
Sempre que preciso mecher em algo está salvo no meu login.
Sempre que adiciono um icone novo, movo ele para o fim da lista, para que os unicodes não baguncem, caso baguncem mando resetar a partir do primeiro que eu já tinha e então só adiciono as classes novas. Logo só troco os font files.

[abnersajr]

Dando uma pesquisada encontrei esse pacote para quem usa gulp.
https://github.com/nfroidure/gulp-iconfont

[vitor-mendrone-deel]

Esse problema surgiu ontem pra mim. Normalmente usava soluções já prontas tipo o Font Awesome ou ícones em SVG. Vou acompanhar o tópico pra ver o que a galera ta usando de solução 😃

[idmarjr]

Eu só uso o Font Awesome como iconfont pela facilidade.

Mas sempre que preciso de ícones personalizados faço isso usando SVG Sprite. É mais leve, mais confiável e menos gambiarra (Porque honestamente, iconfonts é uma baita gambiarra que virou padrão.)

• https://css-tricks.com/svg-sprites-use-better-icon-fonts/
• https://24ways.org/2014/an-overview-of-svg-sprite-creation-techniques/
• http://webdesign.tutsplus.com/tutorials/how-to-implement-cross-browser-svg-sprites--cms-22427

Mas infelizmente crio isso manualmente também. 😞

[willycamargo]

Aqui o processo é paracido @lfeh , o rapaz que trabalhava comigo criou uma task bacana no gulp pra resolver isso ai:

gulp/fonticon.js

/**
 * dependencies
 */
import del from 'del'
import flatten from 'gulp-flatten'
import gulp from 'gulp'
import runSequence from 'run-sequence'
import unzip from 'gulp-unzip'

/**
 * tasks
 */
gulp.task('unzip:fonticon', () =>
  gulp.src('./src/font/fonticon.zip')
    .pipe(unzip())
    .pipe(gulp.dest('./src/font/fonticon'))
)

gulp.task('copy:fonticon', () =>
  gulp.src('./src/font/fonticon/fonts/**')
    .pipe(flatten())
    .pipe(gulp.dest('./src/font/'))
)

gulp.task('clean:fonticon-fonts', () =>
  del([ './src/font/fonticon-*' ])
)

gulp.task('clean:fonticon-temp', () =>
  del([ './src/font/fonticon', './src/font/fonticon.zip' ])
)

gulp.task('fonticon', () =>
  runSequence('unzip:fonticon', 'clean:fonticon-fonts', 'copy:fonticon', 'clean:fonticon-temp', 'font')
)

O processo de gerar o zip e o json no site do icomoon ainda é igual, mas depois de salvo, apenas rodo gulp fonticon que o trabalho monótono é feito 😄

[rickbenetti]

Concordo com o @idmarjr usar o ícone como fonte é muita gambiarra, e estou começando a estudar as dicas do @willianjusten que inclusive são muito boas no blog.

Segue o link sobre ícones:

• http://willianjusten.com.br/sistemas-de-icones-em-svg/

Agora automatizar isso, com SVG ao menos seria genial, mas precisaria manjar de JS ao menos eu imagino pra gerar um plugin que abra a lista de SVG, pegue o código necessário e junte eles em um só criando um sprite de SVG, não sei se isso seria possível.

[rickbenetti]

Ah sim lembrei de um repositório que sigo que pra ícones tem em png e svg dependendo do tipo de navegador ele irá carregar e com o SASS, LESS e Stylus é possível criar functions pra gerar os que são usados senão em engano.

• https://github.com/adamfairhead/webicons

[victorserpac]

Uso SVG sprites há mais de um ano e nunca mais me preocupei com font-icons. Uso o gulp-svgstore junto com o gulp-svgmin para gerar o sprite e consigo otimizar esse processo, só largo os SVG dentro da pasta de icons e o gulp faz todo o trabalho pra mim.

[felipefialho]

Já pensei nessa solução @victorserpac. Consegue enumerar seu passo a passo para a gente ter uma ideia?

[vitorbritto]

A depender do projeto, utilizo o Icomoon e seu processo braçal.

Senão, utilizo o mesmo processo do @victorserpac (via Grunt).

• https://github.com/FWeinb/grunt-svgstore
• https://github.com/sindresorhus/grunt-svgmin
• https://github.com/dbushell/grunt-svg2png

ou

o Grunticon.

[felipefialho]

Valeu pela contribuição @willianjusten. Vou testar SVG ao invés de iconfont.

[vitor-mendrone-deel]

Vocês viram isso @lfeh @willianjusten ?

É basicamente um bash script que cria um spritesheet a partir de SVGs.

[vitorbritto]

Shell Script ❤️

[felipefialho]

Não tinha visto @Mendrone. Cara, preciso migrar pra Gulp o quanto antes, parece ser mais tranquila a utilização desses plugins de automação de gráficos.

[vitorbritto]

@lfeh comecei hoje a utilizar p gulp em todos os meus projetos correntes. Migrei tudo no final de semana. Bower também foi embora. Agora uso JSPM.

O Grunt foi um ótimo companheiro de trabalho, é uma ferramenta excepcional! Quem me conhece, sabe o quanto aprecio a ferramenta. Até montei uma configuração performática, mas não foi o suficiente para execução.

[willianjusten]

Gulp é muito melhor para tudo <3
Já usei de tudo, mas Gulp tá no coração =)

[idmarjr]

Github trocou a iconfont por SVG:
https://github.com/blog/2112-delivering-octicons-with-svg

[felipefialho]

Só completando. Passei a usar SVG para os icons usando o Gulp, após esse commit do @zehfernandes.

Já implementei no Kratos Boilerplate.

[diegodap]

Opa,
Aproveitando o tópico, vocês recebem layout no Sketch?
Tem problemas as vezes na hora de exportar o svg ?

Digo na tela ele estar de uma forma, e quando exporta aparece desconfigurado no navegador.

[GIlbertoDomingues]

Pessoal,
estou implementando a solução do @victorserpac, aqui deu quase certo, só na merda do IE11 que não esta rolando, queria saber se estão usando algum fallback ou hack para funcionar no ie.

Se não, conhecem alguma outra forma de automatizar essa tarefa, que funcione no >IE10 ?

[LuanDc]

Aproveitando o espaço, sei que a Issue é antiga, mas prefiro não criar uma nova e ajudar a manter a organização do fórum.

Preciso converter ícones SVG em font. Existe uma maneira de automatizar esse processo pelo Webpack? Ou apenas pelo IconMoon?

[simaodeveloper]

@LuanDc ainda não precisei fazer nada parecido, mas com uma pesquisa rápida no google, achei esse loader de webpack, https://github.com/jeerbl/webfonts-loader, e esse plugin, https://github.com/jantimon/iconfont-webpack-plugin, da uma olhada e veja se te serve bem e nos conte sua experiência.

[portothree]

[off-topic] que saudade do gulp hahahaha

[eliseumds]

Puts, é coisa chata mesmo. O nosso designer salva os SVGs numa pasta específica, e depois executa um NPM script que gera o arquivo .woff (suportado por todos os browsers) e um componente React+TypeScript com os nomes dos ícones baseados nos nomes dos arquivos SVG, por exemplo:

src/
  fonts/
    icons/
      star.svg
      trash.svg
    minha-outra-fonte/
      blabla.svg

Isso gera os arquivos icons.woff e minha-outra-fonte.woff. Há um outro script que gera um componente Icon.tsx:

import Text, { TextProps } from './Text';

const ICON_NAME_TO_CHAR_CODE = {
  'star': 442,
  'trash': 534,
};

type Props = TextProps & {
  name: keyof typeof ICON_NAME_TO_CHAR_CODE;
};

export default function Icon(props: Props) {
  const { name, ...otherProps } = props;
  const charCode = ICON_NAME_TO_CHAR_CODE[name];

  // The className "font-icon" is a global one created by <GlobalStylesWrapper>
  return (
    <Text className="font-icon" {...otherProps}>
      {String.fromCharCode(charCode)}
    </Text>
  );
}

Gerar o componente é fácil (basicamente um string template). O script que eu criei pra gerar a fonte com unicode characters determinísticos (você pode alterar o SVG, mas se o nome do arquivo continuar o mesmo, não há problema): https://gist.github.com/eliseumds/b17bbb562795489933b4a5888369227d

[LuanDc]

Devido ao prazo eu fui pelo caminho mais simples (iconmoon). Mas quando me derem um tempo irei refatorar e automatizar esse processo. vllw galera :D