# How to Use TypeDialog Logos Quick integration guide with code examples for different frameworks and contexts. --- ## Choosing the Right Variant ### Decision Tree **Is it for web/digital?** - Yes → Use full-color animated or static versions - No → Jump to "Is it for print?" **Does it need animation?** - Yes, dynamic context → Use animated versions (no suffix) - No, static/simple → Use static versions (`_s`) **Is it for print/physical media?** - Yes → Use monochrome (`_bn`) versions - No → Use full-color versions **What's the layout?** - Horizontal (header, banner) → Use `_h` versions - Vertical (stacked) → Use default versions (no `_h`) - Icon only → Use `icon` variants ### Quick Reference | Use Case | File | Format | |----------|------|--------| | **Web header** | `typedialog_logo_h.svg` | SVG, animated | | **App icon** | `typedialog_icon.svg` | SVG, animated | | **Favicon** | `typedialog_icon_s.svg` | SVG, static | | **Social media** | `typedialog_logo_h_s.png` | PNG, static | | **Print** | `typedialog_logo_bn.svg` | SVG, monochrome | | **Email** | `typedialog_logo_h_s.png` | PNG, static | | **Dark background** | `typedialog_logo_h.svg` | SVG, full color | | **Light background** | `typedialog_logo_h.svg` | SVG, full color | --- ## Framework Examples ### HTML/CSS ```html
``` ### React ```jsx import logo from './typedialog_logo_h.svg'; export default function Header() { return (
TypeDialog
); } ``` ### Vue ```vue ``` ### Svelte ```svelte
``` ### Angular ```typescript // In template /* In component CSS */ .logo { max-width: 240px; height: auto; } ``` --- ## Markdown / Documentation ### Simple Image ```markdown ![TypeDialog](./assets/typedialog_logo_h.svg) ``` ### With Link ```markdown [![TypeDialog](./assets/typedialog_logo_h.svg)](https://yoursite.com) ``` ### mdBook / GitHub Docs ```markdown # ![TypeDialog](../assets/typedialog_logo_h.svg) Welcome to TypeDialog Content here... ``` ### Rust Project README ```markdown # TypeDialog ![TypeDialog](assets/typedialog_logo_h.svg) Typed dialogs for inputs, forms and schemas you can trust. ``` --- ## Web Integration Patterns ### Favicon Set ```html ``` ### Hero Section ```html

TypeDialog

Typed dialogs for inputs, forms and schemas you can trust.

``` ### Navigation Bar ```html ``` --- ## Email & Social Media ### Email HTML ```html
TypeDialog
``` ### Social Media ```html ``` --- ## Sizing Guidelines ### Web Sizes | Context | Width | Notes | |---------|-------|-------| | **Favicon** | 32px | Use `typedialog_icon_s.svg` | | **Nav logo** | 32-48px | Use `typedialog_icon.svg` | | **Header** | 200-300px | Use `typedialog_logo_h.svg` | | **Hero** | 400-600px | Use `typedialog_logo_h.svg` | | **Small badge** | 80px | Use `typedialog_icon.svg` | ### Print Sizes | Context | Width | DPI | |---------|-------|-----| | **Business card** | 1 inch | 300 DPI | | **Letter size** | 3-4 inches | 300 DPI | | **Poster** | 8-12 inches | 150 DPI | ### Mobile Sizes | Device | Width | Notes | |--------|-------|-------| | **Phone** | 100-150px | Full logo may be too wide | | **Tablet** | 150-250px | Responsive sizing | | **Desktop** | 240-300px | Standard size | --- ## Dark Mode Support ### CSS Variables Approach ```css :root { --logo-url: url('./typedialog_logo_h.svg'); } body.dark-mode { --logo-url: url('./typedialog_logo_h.svg'); /* Logo works on both light and dark */ } .header-logo { background-image: var(--logo-url); width: 240px; height: 64px; } ``` ### SVG Direct Approach ```html TypeDialog TypeDialog ``` --- ## Performance Tips ### Optimize SVG ```html TypeDialog TypeDialog ``` ### CSS Loading ```css /* Avoid multiple requests --> .logo-light { background-image: url('./typedialog_logo_h.svg'); } .logo-dark { background-image: url('./typedialog_logo_h_bn.svg'); } /* Use data URIs for very small files */ .logo { background-image: url('data:image/svg+xml;...'); } ``` ### Caching ```html TypeDialog ``` --- ## Accessibility ### Alt Text ```html TypeDialog Home ``` ### ARIA Labels ```html TypeDialog ``` ### Animation Preferences ```css /* Respect user's motion preferences */ @media (prefers-reduced-motion: reduce) { /* Option 1: Use static version */ img.logo { content: url('./typedialog_logo_h_s.svg'); } /* Option 2: Disable animations */ .logo * { animation: none !important; } } ``` --- ## Common Issues & Solutions ### Favicon Not Showing **Problem**: Favicon doesn't appear in browser tab **Solutions**: 1. Clear browser cache (Ctrl+Shift+Delete) 2. Check file paths are correct 3. Ensure `` tags are in `` 4. Test in incognito mode ### SVG Scaling Issues **Problem**: SVG doesn't scale smoothly **Solutions**: 1. Verify `viewBox` attribute is set 2. Don't specify both `width/height` and `viewBox` 3. Use CSS for sizing: ```css img.logo { max-width: 100%; height: auto; } ``` ### Animation Not Working **Problem**: Cursor blink not visible **Solutions**: 1. Use animated variant (no `_s` suffix) 2. Check browser supports CSS animations 3. Verify `@keyframes` in `