Documentación

Icon Pack es un paquete de íconos generado con la App de IcoMoon.io usado en el proyecto Twenty’em WordPress Framework.

Instalación

Puedes istalar Icon Pack de varias maneras.

Instalar vía npm

$ npm i @themingisprose/icon-pack

Instalar vía Composer

$ composer require themingisprose/icon-pack

Clonar desde GitHub

$ git clone https://github.com/themingisprose/icon-pack.git

Instalación Manual

Puedes descargar la última versión, extraer el contenido del archivo .zip y agregarlo a tu proyecto.

Contenido

Una vez que tengas guardado en tu ordenador el proyecto, encontrarás algo como esto:

├── composer.json
├── fonts
│   ├── icomoon.svg
│   ├── icomoon.ttf
│   └── icomoon.woff
├── LICENSE
├── README.md
├── selection.json
├── style.css
├── style.scss
├── svg
│   ├── *.svg
└── variables.scss

Para trabajar en tu proyecto debes agregar el directorio fonts/, en caso de que desees emplear los archivos en formato .svg entonces debes agregar el directorio svg/. También es impresindible hacer un llamado al archivo style.css.

style.scss y variables.scss

Estos archivos contienen el código fuente para compilar y generar un archivo .css. Es muy probable que debas sobre escribir la variable $icomoon-font-path que se encuentra en variables.scss, y darle un valor apuntando al directorio fonts/, en dependencia de tu árbol de directorios. Ejemplo:

$icomoon-font-path: "../fonts";

selection.json

Puedes importar el archivo selection.json a la App de IcoMoon usando el botón Import Icons (o vía Main Menu → Manage Projects) para generar nuevamente la selección de íconos.

Modo de Uso

Para comenzar a usar Icon Pack, lo primero que debes hacer es incluir el archivo styles.css en tu proyecto. Et voilà:

<link rel="stylesheet" href="https://your.site.com/vendor/themingisprose/icon-pack/style.css">

HTML

<i class="icomoon-ampersand"></i>

SVG

<img src="svg/ampersand.svg">