Skip to content

Benutzerhandbuch

Audience: User
You will learn: - Icons für Ihre Projekte herunterladen und verwenden - Web-Interface für Icon-Suche und -Auswahl nutzen - SVG-Icons in verschiedene Technologien integrieren - CSS-Styling und Anpassungen durchführen

Pre-requisites: - Grundkenntnisse in HTML/CSS - Zugriff auf das Icon Tool Repository - Node.js installiert (für lokale Nutzung)

Schnellstart

1. Icon-Sammlung herunterladen

# Vollständige Sammlung (162 Icons, 69KB)
node extract-icons.js

# Ergebnis: turkiye-atlasi-icons.zip

Erwartetes Ergebnis: 

✓ 162 Icons extrahiert
✓ ZIP erstellt: 69.234 bytes
📁 Datei: turkiye-atlasi-icons.zip

2. Spezifische Icons auswählen

# Reduzierte Auswahl (vordefiniert)
node create-selected-icons.js

# Ergebnis: selected-icons.zip

Erwartetes Ergebnis: 

✓ 16 Icons kopiert
✓ ZIP erstellt: 8.234 bytes
📁 Datei: selected-icons.zip

Evidenz: create-selected-icons.js:6-22, docs/USAGE.md:7-21

Web-Interface nutzen

1. Server starten

python app.py

Erwartetes Ergebnis: 

 * Running on http://0.0.0.0:5000
 * Debug mode: on

2. Icons durchsuchen

  1. Öffnen: http://localhost:5000
  2. Suchen: Suchfeld für Icon-Namen verwenden
  3. Filtern: Kategorien zur Eingrenzung nutzen
  4. Vorschau: Icons durch Klick vergrößern

3. Download-Optionen

  • Einzelne Icons: Rechtsklick → "Speichern unter"
  • Kategorie-Sets: API-Endpunkt nutzen
  • Komplette Sammlung: ZIP-Download über Interface

Evidenz: app.py:45-64, templates/index.html

Icon-Integration

HTML Direktintegration

<!-- Inline SVG (empfohlen) -->
<svg class="icon" xmlns="http://www.w3.org/2000/svg" 
     viewBox="0 0 384 512" fill="currentColor">
  <path d="M280 64h40c35.3 0 64 28.7 64 64v320c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V128c0-35.3 28.7-64 64-64h40V24c0-13.3 10.7-24 24-24s24 10.7 24 24v40h144V24c0-13.3 10.7-24 24-24s24 10.7 24 24v40z"/>
</svg>

<!-- Als img Tag -->
<img src="icons/home.svg" alt="Home" class="icon">

<!-- Als CSS Background -->
<div class="home-icon-bg">Startseite</div>

CSS-Integration

/* Basis-Icon-Styling */
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  fill: currentColor;
}

/* Background-Image Methode */
.home-icon-bg {
  background: url('icons/home.svg') no-repeat center;
  background-size: 16px 16px;
  padding-left: 24px;
}

Evidenz: docs/USAGE.md:26-44, extract-icons.js:88-94

JavaScript-Integration

// Dynamisches Icon-Laden
async function loadIcon(iconName) {
  const response = await fetch(`/static/icons/${iconName}.svg`);
  const svgText = await response.text();
  return svgText;
}

// Verwendung
const homeIcon = await loadIcon('home');
document.getElementById('icon-container').innerHTML = homeIcon;

// Icon-Informationen über API abrufen
fetch('/api/icons')
  .then(response => response.json())
  .then(data => {
    console.log(`${data.icons.length} Icons verfügbar`);
    // Icons verarbeiten...
  });

Evidenz: app.py:51-64, docs/USAGE.md:47-57

CSS-Styling

Größenvariationen

.icon-sm { width: 0.875em; height: 0.875em; }  /* 14px bei 16px base */
.icon-lg { width: 1.25em; height: 1.25em; }    /* 20px bei 16px base */
.icon-xl { width: 2em; height: 2em; }          /* 32px bei 16px base */

Farbvariationen

.icon-primary { color: #007bff; }
.icon-success { color: #28a745; }
.icon-warning { color: #ffc107; }
.icon-danger { color: #dc3545; }
.icon-muted { color: #6c757d; }

Animationen

/* Rotation (für Spinner, etc.) */
.icon-spin {
  animation: fa-spin 1s linear infinite;
}

@keyframes fa-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Hover-Effekte */
.icon-hover:hover {
  transform: scale(1.1);
  transition: transform 0.2s ease;
}

Evidenz: docs/USAGE.md:84-119

Häufige Anwendungsfälle

<!-- Zurück/Weiter Buttons -->
<button><svg class="icon"><!-- arrow-left.svg --></svg> Zurück</button>
<button>Weiter <svg class="icon"><!-- arrow-right.svg --></svg></button>

<!-- Breadcrumbs -->
<nav>
  <a href="/">Home</a>
  <svg class="icon"><!-- breadcrumbs.svg --></svg>
  <a href="/products">Produkte</a>
</nav>

Formulare

<!-- Such-Input -->
<div class="input-group">
  <svg class="icon"><!-- search.svg --></svg>
  <input type="search" placeholder="Suchen...">
</div>

<!-- Validation States -->
<div class="form-field success">
  <svg class="icon icon-success"><!-- check.svg --></svg>
  <span>E-Mail gültig</span>
</div>

Status-Anzeigen

<!-- Erfolgsmeldung -->
<div class="alert alert-success">
  <svg class="icon"><!-- success.svg --></svg>
  Vorgang erfolgreich abgeschlossen
</div>

<!-- Loading State -->
<div class="loading">
  <svg class="icon icon-spin"><!-- spinner.svg --></svg>
  Laden...
</div>

Evidenz: docs/USAGE.md:59-81

Performance-Optimierung

1. Icon-Sprites erstellen

// Mehrere Icons in eine SVG-Datei kombinieren
const createIconSprite = (iconNames) => {
  return `
    <svg style="display: none;">
      <defs>
        ${iconNames.map(name => `
          <symbol id="icon-${name}">
            <!-- SVG-Content für ${name} -->
          </symbol>
        `).join('')}
      </defs>
    </svg>
  `;
};

// Verwendung
<svg class="icon">
  <use href="#icon-home"/>
</svg>

2. Lazy Loading

// Icons nur bei Bedarf laden
const lazyLoadIcon = (element, iconName) => {
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        loadIcon(iconName).then(svg => {
          entry.target.innerHTML = svg;
        });
        observer.unobserve(entry.target);
      }
    });
  });
  observer.observe(element);
};

3. Caching-Strategien

// Service Worker für Icon-Caching
self.addEventListener('fetch', event => {
  if (event.request.url.includes('/icons/')) {
    event.respondWith(
      caches.match(event.request).then(response => {
        return response || fetch(event.request);
      })
    );
  }
});

Evidenz: docs/USAGE.md:178-182

Troubleshooting

Häufige Probleme

Icons werden nicht angezeigt

Symptom: Leere Bereiche statt Icons
Ursachen: - Falsche Pfad-Angabe - CORS-Probleme bei externem Laden - CSS display: none auf SVG-Elementen

Lösungen: 

<!-- Korrekter Pfad prüfen -->
<img src="./icons/home.svg" alt="Home">

<!-- CORS-Headers setzen (Server-seitig) -->
Access-Control-Allow-Origin: *

Icons haben falsche Farbe

Symptom: Icons sind schwarz statt CSS-Farbe
Ursache: Fehlende fill="currentColor" Eigenschaft

Lösung: 

.icon {
  fill: currentColor; /* Farbe von CSS übernehmen */
  color: #007bff;     /* Gewünschte Farbe setzen */
}

Icons sind zu groß/klein

Symptom: Icons passen nicht zum Text
Lösung: Einheitliche Sizing-Strategie verwenden

.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.125em; /* Baseline-Korrektur */
}

Evidenz: docs/USAGE.md:156-176

Nächste Schritte