Incluir íconos personalizados en Power Apps puede ser un desafío. Las imágenes tradicionales pueden perder calidad y dificultar la adaptación a la paleta de colores de tu aplicación. Aunque los SVG ofrecen una alternativa más flexible y escalable, integrarlos requiere manipulación manual del código y ajustes de color. SVG Magic simplifica este proceso, permitiéndote editar y exportar tus gráficos SVG de manera eficiente, generando el código necesario para integrarlos perfectamente en tus aplicaciones.
- ⚙️ Funcionalidades
- 📸 Vista de la herramienta
- 🚀 Cómo usar la herramienta
- 🛠️ Cómo usar un SVG en Power Apps
- 🔥 Bonus: Descarga SVGs para tus proyectos
- ✅ Pegar código SVG
- ✅ Cargar archivos SVG directamente
- ✅ Vista previa en tiempo real del SVG
- ✅ Edición de color principal
- ✅ Generación de código Power FX
- ✅ Generación de estructura YAML
-
Abre la app en: https://svgmagic.vercel.app/
-
Carga tu SVG: Tienes dos opciones:
- Pegar código SVG: Copia el código SVG desde una galería de íconos como Bootstrap Icons o Heroicons, y pégalo en el campo de texto.
- Subir archivo SVG: Haz clic en el botón de carga y selecciona tu archivo
.svg.
- Personaliza el color: Si tu SVG tiene un solo color, podrás cambiarlo utilizando el selector de color. Nota: Si tu SVG tiene múltiples colores, esta funcionalidad aún no está disponible, pero estoy trabajando en ello.
-
Exporta tu SVG: Una vez personalizado, puedes:
- 💾 Copiar código Power FX
- 💾 Copiar estructura YAML
- ¡Listo! Ahora puedes usar el código en tu aplicación Power Apps.
Dependiendo de la opción que hayas elegido anteriormente, sigue los siguientes pasos:
El código copiado se verá así:
"data:image/svg+xml;utf8," & EncodeUrl("<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='#16CAAA' class='bi bi-windows' viewBox='0 0 16 16'>
<path d='M6.555 1.375 0 2.237v5.45h6.55zM0 13.795l6.555.933V8.313H0zm7.278-5.4.026 6.378L16 16V8.395zM16 0 7.33 1.244v6.414H16z'> </path> </svg>")
- Abre tu aplicación en Power Apps.
- Inserta un control de imagen ("Image").
- En su propiedad
Image, pega el código que copiaste desde SVG Magic. - Modifica el tamaño y ubica la imagen a tu gusto.
El código copiado se verá así:
- SVGMagic:
Control: Image
Properties:
Image: '= "data:image/svg+xml; utf-8, " & EncodeUrl($"<svg xmlns=''http://www.w3.org/2000/svg'' width=''16'' height=''16'' fill=''#16CAAA'' class=''bi bi-windows'' viewBox=''0 0 16 16''>
<path d=''M6.555 1.375 0 2.237v5.45h6.555zM0 13.795l6.555.933V8.313H0zm7.278-5.4.026 6.378L16 16V8.395zM16 0 7.33 1.244v6.414H16z''></path> </svg>")'
Height: =150
Width: =150
X: =50
Y: =50
- Abre tu aplicación en Power Apps.
- En la vista de árbol, selecciona la pantalla donde quieras insertar el SVG.
- Haz clic en los tres puntos y selecciona "Pegar -preview-".
- Se insertará una imagen con el nombre "SVGMagic". Modifica el tamaño y ubica la imagen a tu gusto.
¿No tienes un SVG a mano? Estas páginas te ofrecen miles de recursos gratuitos y personalizables:
- Bootstrap Icons – Íconos modernos del ecosistema Bootstrap.
- SVGL – Herramienta visual para editar y copiar SVGs en segundos.
- Heroicons – Íconos para apps modernas, optimizados para Tailwind.
- Font Awesome – La colección más famosa y versátil.
- SVG Repo – Repositorio con miles de SVGs gratuitos.
- Iconoir – Colección open-source, elegante y robusta.
- Feather Icons – Íconos simples y livianos.
- Lucide Icons – Una versión refinada de Feather, más flexible.
- Tabler Icons – Librería con estilo limpio, ideal para dashboards.
- SVG Silh – Siluetas SVG para diseño e ilustración.
- Material Icons – Íconos de Google, ideales para interfaces limpias.
Hecho con ❤️ por Andrés Velásquez