ฝัง
- เผยแพร่เมื่อ 16 ก.ค. 2024
- En nuestra web acostumbramos a necesitar utilizar múltiples iconos. Existen muchísimas formas de usar iconos: desde imágenes individuales, librerías como font awesome, etc... Una de las más interesantes y personalizables es crear SPRITES SVG.
Se trata de un fichero SVG que contiene múltiples iconos SVG y podemos usarlos con unas sencillas líneas de HTML, y personalizarlos con CSS. ¡Sin utilizar librerías, frameworks ni dependencias externas!
¡Te lo explico!
TIMELINE:
00:00 Introducción: Iconos en web
00:31 Font Awesome
01:08 Pack de iconos con SVG
01:40 Icono SVG
03:15 Sprite SVG
04:02 Usando los iconos en HTML
04:30 Ejemplo de pack de iconos
05:50 Optimizar SVG con SVGO github.com/svg/svgo
06:20 Herramienta SVGOMG jakearchibald.github.io/svgomg/
07:34 Script para generar packs de iconos github.com/manzdev/svg-icons
08:15 APARICIÓN ESTELAR DE:
🌟 Danirod_ @makigas
🌟 Afor @afor_digital
LINKS:
📙 HTML: lenguajehtml.com/html/
📘 CSS: lenguajecss.com/css/
📒 Javascript lenguajejs.com/javascript/
¡No te olvides de seguirme en mis otras redes sociales!
⚡ links.manz.dev
---
📹 Twitch: / manzdev
🐤 Twitter: / manz
📷 Instagram: / manz.dev
🎶 Tiktok: / manz.dev
#svg #html #css #javascript #programacion #frontend #react #angular #desarrolloweb - วิทยาศาสตร์และเทคโนโลยี
![[UNCUT] ลูกหมี-ลิลลี่ เหงียน เปิดใจฟาด ปู มัณฑนา I คนดังนั่งเคลียร์ I 15 ก.ค.67](http://i.ytimg.com/vi/FKQ60Y7bJ6s/mqdefault.jpg)
Oye papá eres el desarrollador más puritano que conozco, vales 100%!
Jajaja no sé si eso es bueno... pero, ¡gracias! 😂
@@ManzDev me refiero que haces mucho videos con tecnología nativa.
Grande Manz muy buenos directos y gracias por compartir estos tips.
¡Gracias, coke!
Tengo una duda al montar e intentar cambiar el color por css de un svg. Al crear el svg con el vcode me lo genera con stroke. ¿Se podría cambiar ese stroke por css? Miles de gracias por todo lo que compartes!
Sí, claro. Los valores de SVG se pueden cambiar por CSS. Por ejemplo, si tienes un atributo SVG fill o stroke con un color concreto, puedes quitar el atributo y pasarlo al CSS, en lugar de un color le pones el `var(--color)` deseado, y luego con CSS gestionas el resto.
Recuerda que las variables CSS se pueden obtener de elementos padres.
¡Saludos!
consulta manz al declarar un el navegador me esta aplicando implicitamente un width: 300px y un height: 150px, en chrome ,firefox y chromium no entiendo porque.
Jonathan, si declaras un SVG y no le das un tamaño explícitamente, el navegador da el tamaño por defecto de 300x150 (es el comportamiento normal, por defecto).
@@ManzDev genial no estoy loco xD. Gracias!!!
Esto solo funciona en linux? es una lastima se ve tan buen trabajo el generador pero la explicacion de uso es muy pobre !