adicionando_icones_em_sc_icons

adicionando_icones_em_sc_icons.md

Adicionando ícones em sc-icons

Já possui os arquivos svgs de cada ícone que deseja adicionar?

Não

Entre no site do icomoon: icomoon.io, escolha e adicione todos os ícones que você precisa, e em seguida baixe somente os SVGs para alguma pasta do seu computador.

Renomeie

Entre na pasta que estão os ícones e renomeie os arquivos SVGs com os nomes corretos (português)

Entre na branch sc-icons

Faça o pull

Importe para icomoon

• Menu → Manage Projects → New Project → Import icons
• Selecione o projeto da font seucondominio:
  app/assets/stylesheets/seucondominio/_sc-icons/backup/import_project_to_ico_moon_site.json
• Menu → Manage Projects → New Project → Import icons → importe os novos SVGs → clique em cada um para selecionar

Padronize os novos ícones

1. Clique sobre o novo ícone
2. Ajuste para grid 48 como explicado na
3. Ajuste os espaçamentos como explicado na

• Clique em: Generate Font

Antes de baixar vá em Preferências

• Nome da fonte: sc-icons
• Prefixo: sc-icon-
• CSS Selector: marque Use a class
  • Campo que aparece: preencha com: .sc-icon

Clique em download

Agora deixe abertas duas janelas (explorer de diretórios)

Abra o diretório que acabou de baixar do icomoon e cole os arquivos:

• sc-icons.woff
• sc-icons.ttf
• sc-icons.svg
• sc-icons.eot

Cole nas duas pastas do app seucondominio:

• app/assets/stylesheets/seucondominio/_sc-icons/fonts
• app/javascript/fonts/_sc-icons

Atualize as variáveis do scss

• Atualize a pasta fonts do seucondominio com as novas fontes
• Abra o arquivo baixado do icomoon style.css
  • Alimente a variável $icones nos dois arquivos abaixo:
    • app/javascript/stylesheets/seucondominio/_sc-icons.scss
    • app/assets/stylesheets/seucondominio/_sc-icons.scss

Atualizando a pasta do BACKUP stylesheets/seucondominio/_sc-icons/backup

Atualizando projeto json

• Na pasta baixada do icomoon, copie o arquivo selection.json para as duas pastas:
  • app/assets/stylesheets/seucondominio/_sc-icons/backup
  • app/javascript/stylesheets/seucondominio/_sc-icons/backup
    • Renomeie esse arquivo para import_project_to_ico_moon_site.json (precisa apagar o antigo)

Gere os novos SVGs

• Abra o site icomoon → Manage Projects → New Project → Import → selecione: import_project_to_ico_moon_site.json
• Clique na engrenagem → preencha campo color com 444444 → feche modal → Download
• Entre na pasta /backup/svg
  • Apague todos os arquivos (o icomoon sempre modifica a forma de gerar backups — é importante salvar TODOS)
  • Salve os novos SVGs nessa pasta

Teste no browser /icones se os novos ícones aparecerem

Caso não funcionar, investigue: app/views/docs/icones.html.erb

Atualize o código do arquivo carregando-responsivo.css se necessário

• (caso os códigos do :before { content } tenham mudado)

Se o site do icomoon não existir mais

• Temos ainda os SVGs com os nomes certos como backup