Iconos de plumas: 240 pictogramas gratuitos modernos

Feather Icons es un conjunto de 240 símbolos que son adecuados para casi cualquier proyecto, debido a su diseño muy limpio. Otra razón para ello es que se distribuyen de forma gratuita, bajo la licencia liberal del MIT.

«Iconos de plumas”Es un proyecto del desarrollador frontend de California Cole Bemis, quien ya ha lanzado un par de otros proyectos a través de Github, pero solo ganó algo de atención con Feather.

Los iconos de plumas se basan en SVG

En esencia, los símbolos del paquete de plumas son archivos SVG, lo que le permite ajustar sus colores o escalarlos con las herramientas adecuadas. La forma más sencilla de integrar los símbolos en su sitio web es utilizando una combinación de atributos de datos SVG, JavaScript y HTML5.

Primero, integre el archivo JavaScript comprimido feather.min.js, o la versión sin comprimir feather.js en su documento HTML. Ahora, llame al icono deseado como atributo de datos para su elemento. Eso puede verse así:

<i data-feather="circle"></i>

De esta manera, el manejo sigue siendo sencillo y comprensible para usted. Ahora, JavaScript se asegura de que se llame y ejecute el marcado SVG correspondiente al atributo de datos. Para hacer eso, se debe colocar un comando de reemplazo al final del documento:

<script>
  feather.replace()
</script>

Los parámetros del comando reemplazar le permiten influir en la visualización de los pictogramas respectivos. Por ejemplo, puede definir el ancho de línea usando:

<script>
  feather.replace({ class: 'stroke-width': 1 })
</script>

En tiempo de ejecución, los parámetros para el comando de reemplazo están integrados en la cadena SVG. Sin embargo, no es posible limitar las opciones a iconos individuales.

Los iconos de plumas también se pueden utilizar con el nodo

Feather no solo se puede usar usando JavaScript del lado del cliente, sino también a través de Node. Aquí, el uso es un poco más complicado. Se está trabajando en un objeto para los usuarios convencionales principales.

Los Feather Icons no son lo mejor desde la cerveza enlatada, y tampoco están exentos de alternativas. Sin embargo, en cualquier caso, son una ampliación útil de la caja de herramientas de cualquier diseñador web. Disfrutar.

Por cierto: si primero quieres experimentar un poco, este Codepen es una buena opción para hacer eso.