Lección 6. Iconos y diseño visual

📘 Curso de formación: Creación de complementos para FreeCAD

Objetivo de la lección: añadir iconos a los botones y al entorno de trabajo para que el complemento tenga un aspecto profesional.

---

🖼 Parte 1. Formatos de iconos compatibles

FreeCAD es compatible con:

• SVG (recomendado) — se escala sin pérdidas
• PNG — rasterizado, pero fácil de usar

💡 Los iconos deben ser simples, contrastados y reconocibles incluso en tamaños pequeños (16×16 o 24×24 píxeles).

---

📁 Parte 2. Estructura de la carpeta de iconos

Crea una subcarpeta dentro de la carpeta del complemento:

BoxBuilderAddon/
├── Resources/
│   └── icons/
│       ├── box_builder.svg   ← icono del entorno de trabajo
│       └── create_box.svg    ← icono del comando
├── InitGui.py
└── box_builder_workbench.py

💡 La ruta Resources/icons/ es un acuerdo estándar en el ecosistema de FreeCAD.

---

🎨 Parte 3. ¿Dónde conseguir iconos?

Opción 1: Utiliza los iconos integrados de FreeCAD

FreeCAD viene con cientos de iconos. Por ejemplo:

• :/icons/Part_Box.svg
• :/icons/Document-new.svg

Pero es mejor crear los tuyos propios para no depender de rutas internas.

Opción 2: Crea un icono simple manualmente

Ejemplo: create_box.svg

<!-- create_box.svg -->
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64">
  <rect x="10" y="10" width="44" height="44" fill="none" stroke="black" stroke-width="4"/>
  <line x1="10" y1="10" x2="20" y2="0" stroke="black" stroke-width="4"/>
  <line x1="54" y1="10" x2="64" y2="0" stroke="black" stroke-width="4"/>
  <line x1="54" y1="54" x2="64" y2="44" stroke="black" stroke-width="4"/>
  <line x1="20" y1="0" x2="64" y2="0" stroke="black" stroke-width="4"/>
  <line x1="64" y1="0" x2="64" y2="44" stroke="black" stroke-width="4"/>
</svg>

Guarda este código en el archivo create_box.svg dentro de Resources/icons/.

💡 Puedes abrir el SVG en el navegador para ver el resultado.

---

🛠 Parte 4. Conexión de iconos en el código

Paso 1. Actualiza box_builder_workbench.py

Añade al principio del archivo (después de las importaciones):

import os

Luego, busca la clase BoxBuilderCommand y actualiza el método GetResources:

class BoxBuilderCommand:
    def GetResources(self):
        # Ruta al icono
        icon_path = os.path.join(
            os.path.dirname(__file__),
            "Resources", "icons", "create_box.svg"
        )
        return {
            "MenuText": "Box Builder",
            "ToolTip": "Create a box with custom dimensions",
            "Pixmap": icon_path  # ← conectamos el icono
        }
    # ... el resto sin cambios

Paso 2. Añade un icono para el entorno de trabajo

En la clase BoxBuilderWorkbench, añade la propiedad Icon:

class BoxBuilderWorkbench(FreeCADGui.Workbench):
    MenuText = "Box Builder"
    ToolTip = "Create custom boxes with GUI"

    # Ruta al icono del entorno de trabajo
    def __init__(self):
        self.Icon = os.path.join(
            os.path.dirname(__file__),
            "Resources", "icons", "box_builder.svg"
        )

    def Initialize(self):
        self.list = ["BoxBuilderCommand"]
        self.appendToolbar("Box Tools", self.list)
        self.appendMenu("Box Builder", self.list)

    def GetClassName(self):
        return "Gui::PythonWorkbench"

⚠️ Si no has creado box_builder.svg, simplemente copia create_box.svg y renómbralo.

---

🧪 Paso 5. Comprobación del funcionamiento

1. Asegúrate de que la estructura de carpetas sea correcta:

   BoxBuilderAddon/Resources/icons/create_box.svg
   BoxBuilderAddon/Resources/icons/box_builder.svg

2. Reinicia FreeCAD
3. Selecciona el entorno de trabajo Box Builder

✅ Deberías ver:

• Un icono junto al nombre del entorno de trabajo (en la lista)
• Un icono en el botón de la barra de herramientas

---

💡 Consejos sobre iconos

• Utiliza negro sobre fondo transparente: FreeCAD lo adaptará automáticamente al tema (claro/oscuro).
• El tamaño del SVG no importa, lo principal es que sea vectorial.
• Para PNG, utiliza un fondo transparente y un tamaño de 64×64 o 128×128.
• No uses colores: los iconos en FreeCAD suelen ser monocromáticos.

---

🧪 Ejercicio práctico

1. Crea el icono box_builder.svg (puedes copiar create_box.svg).
2. Busca en internet un icono SVG de caja gratuito (por ejemplo, en Flaticon o Material Icons) y adáptalo.
3. Intenta usar PNG en lugar de SVG; asegúrate de que el fondo sea transparente.

---

🌐 ¿Dónde conseguir iconos listos para usar?

• Material Design Icons → descargar como SVG
• Feather Icons → simples y limpios
• Código fuente de FreeCAD → cientos de iconos en formato .svg

---

▶️ ¿Qué sigue?

En la Lección 7 aprenderemos a:

• Publicar el complemento a través del Administrador de complementos oficial.
• Crear un archivo package.xml.
• Preparar un repositorio en GitHub.
• Hacer que otros usuarios puedan instalar fácilmente tu complemento.