@zkreations/icons v1.0.10

Sobre estos iconos

Los iconos en SVG son escalables, pesan mucho menos que las imágenes, son editables con CSS y mucho más. Sin embargo, el problema principal (al menos para mí) es su código, el cual suele ser muy grande.

Por esto he diseñado manualmente el código de cada icono con el fin de tomar decisiones inteligentes para lograr la menor cantidad de código posible. Esta labor fue más fácil de realizar gracias a la herramienta svg-path-editor. He nombrado este pack "Meteor icons" y es de código abierto.

Empezando

El siguiente código CSS ayuda a mantener la etiqueta SVG más limpia, también te permitirá personalizar rápidamente los iconos:

.i {
  stroke-width: var(--i-stroke,2);
  width: var(--i-size,20px);
  height: var(--i-size,20px);
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

Puedes configurar el tamaño y grosor con variables CSS:

SVG inline

Elige cualquier icono de la página de demostración, pulsa la opción "Copy code" y pega el código en donde lo requieras en tu proyecto, eso es todo.

SVG Sprite

Agrega a tu proyecto el archivo svg-sprite.svg. Ahora, en cualquier parte, incluye los iconos usando este código, reemplazando "anchor" por el nombre del icono deseado, que puedes copiar de la página de demostración:

<svg class="i">
  <use href="svg-sprite.svg#github"/>
</svg>

Reemplaza github por el nombre de un icono de la página de demostración.

Pug mixin

Para proyectos creados con pugjs, agrega el archivo svg-mixin.pug a tu proyecto. Tras incluirlo el mixin pondrás llamarlo de esta manera:

+svg('github')

Reemplaza github por el nombre de un icono de la página de demostración.

También cuentas con un segundo parámetro, que te permite reemplazar la clase i i-icon por otra, por ejemplo:

+svg('github', 'mi-clase')

También puedes pasar cualquier atributo al icono, por ejemplo:

+svg('github').foo#foo(data-example='foo')

Blogger

Si tu proyecto es una plantilla de Blogger, agrega la inclusión svg-includable.xml. Para incluirlo necesitarás etiquetas b:defaultmarkups, por ejemplo:

<b:defaultmarkups>
  <b:defaultmarkup type="Common">
    <!-- svg-includable.xml aquí -->
  </b:defaultmarkup>
</b:defaultmarkups>

Tras la inclusión, podrás llamar a cualquier icono en cualquier parte de la plantilla usando una etiqueta b:include, por ejemplo:

<b:include name='i:svg' data='{ icon: "github" }'/>

Reemplaza github por el nombre de un icono de la página de demostración.

La inclusión cuenta con algunos parámetros que te permitirán personalizar la etiqueta SVG resultante. Los parámetros disponibles son los siguientes:

Aquí un ejemplo agregando algunos atributos en la inclusión de Blogger:

<b:include name='i:svg' data='{ icon: "github", width: "50px", height: "50px" }'/>

Contribuir

Todos los iconos son diseñados por Daniel Abel, pero puedes ayudar a mantener o mejorar este proyecto tomando en cuenta los siguientes puntos:

• Mejorar el diseño y consistencia de los iconos
• Mantener el código SVG lo más pequeño posible
• En caso de solicitar un icono, deja un ejemplo claro
• En caso de aportar un icono, debes ser el autor original

Si lo deseas, también puedes ayudarme para mantener este y más proyectos invitándome un café ☕. Te lo agradeceré mucho 👏.

License

zkreations icons is licensed under the MIT License