jesus/TypeDialog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
TypeDialog/imgs/how-to-use.md
Jesús Pérez cb6aa2ff82
chore: add imgs
2025-12-18 01:09:39 +00:00

10 KiB
Raw Blame History

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

<!DOCTYPE html>
<html>
<head>
  <link rel="icon" href="imgs/favicon.svg" type="image/svg+xml">
</head>
<body>
  <!-- Hero section -->
  <header class="hero">
    <img src="imgs/typedialog_logo_h.svg" alt="TypeDialog" class="logo">
  </header>

  <style>
    .logo {
      max-width: 240px;
      height: auto;
      margin: 20px 0;
    }
  </style>
</body>
</html>

React

import logo from 'imgs/typedialog_logo_h.svg';

export default function Header() {
  return (
    <header className="hero">
      <img
        src={logo}
        alt="TypeDialog"
        className="logo"
        width={240}
      />
    </header>
  );
}

Vue

<template>
  <header class="hero">
    <img
      src="@/assets/imgs/typedialog_logo_h.svg"
      alt="TypeDialog"
      class="logo"
      :width="240"
    >
  </header>
</template>

<script setup>
// If using as component:
import TypeDialogLogo from '@/assets/imgs/typedialog_logo_h.svg';
</script>

<style scoped>
.logo {
  max-width: 240px;
  height: auto;
}
</style>

Svelte

<script>
  import logo from '../imgs/typedialog_logo_h.svg';
</script>

<header class="hero">
  <img src={logo} alt="TypeDialog" class="logo" width="240" />
</header>

<style>
  .logo {
    max-width: 240px;
    height: auto;
  }
</style>

Angular

// In template
<img
  src="assets/imgs/typedialog_logo_h.svg"
  alt="TypeDialog"
  class="logo"
  width="240"
/>

/* In component CSS */
.logo {
  max-width: 240px;
  height: auto;
}

Markdown / Documentation

Simple Image

![TypeDialog](./imgs/typedialog_logo_h.svg)

With Link

[![TypeDialog](./imgs/typedialog_logo_h.svg)](https://yoursite.com)

mdBook / GitHub Docs

# ![TypeDialog](../imgs/typedialog_logo_h.svg) Welcome to TypeDialog

Content here...

Rust Project README

# TypeDialog

![TypeDialog](imgs/typedialog_logo_h.svg)

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

Web Integration Patterns

Favicon Set

<link rel="icon" href="/imgs/favicon.svg" type="image/svg+xml">
<link rel="icon" href="/imgs/favicon-32.png" type="image/png" sizes="32x32">
<link rel="icon" href="/imgs/favicon-16.png" type="image/png" sizes="16x16">
<link rel="apple-touch-icon" href="/imgs/favicon-64.png">
<link rel="icon" href="/imgs/favicon.ico" sizes="16x16 32x32 64x64">

Hero Section

<section class="hero">
  <div class="hero-content">
    <img src="imgs/typedialog_logo_h.svg" alt="TypeDialog" class="hero-logo">
    <h1>TypeDialog</h1>
    <p>Typed dialogs for inputs, forms and schemas you can trust.</p>
  </div>
</section>

<style>
  .hero-logo {
    max-width: 300px;
    margin-bottom: 30px;
    animation: fadeIn 0.6s ease-in-out;
  }

  @keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
  }
</style>

Navigation Bar

<nav class="navbar">
  <a href="/" class="nav-logo">
    <img src="imgs/typedialog_icon_s.svg" alt="TypeDialog" width="32">
    <span>TypeDialog</span>
  </a>
  <!-- Nav links -->
</nav>

<style>
  .nav-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
  }

  .nav-logo img {
    width: 32px;
    height: auto;
  }
</style>

Email & Social Media

Email HTML

<!-- Use static PNG export to avoid animation issues -->
<table style="width: 100%; max-width: 600px;">
  <tr>
    <td style="text-align: center; padding: 20px;">
      <img
        src="https://yoursite.com/imgs/typedialog-logo.png"
        alt="TypeDialog"
        width="240"
        height="64"
        style="border: 0; display: block;"
      />
    </td>
  </tr>
</table>

Social Media

<!-- Meta tags for social sharing -->
<meta property="og:image" content="https://yoursite.com/imgs/typedialog_logo_h_s.png">
<meta property="twitter:image" content="https://yoursite.com/imgs/typedialog_logo_h_s.png">
<meta property="og:image:alt" content="TypeDialog Logo">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">

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

:root {
  --logo-url: url('imgs/typedialog_logo_h.svg');
}

body.dark-mode {
  --logo-url: url('imgs/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

<!-- SVG works on both light/dark backgrounds -->
<img src="imgs/typedialog_logo_h.svg" alt="TypeDialog">

<!-- If needing different versions: -->
<img
  src="imgs/typedialog_logo_h.svg"
  alt="TypeDialog"
  class="logo-light"
  style="display: block;"
/>
<img
  src="imgs/typedialog_logo_h_bn.svg"
  alt="TypeDialog"
  class="logo-dark"
  style="display: none;"
/>

<style>
  @media (prefers-color-scheme: dark) {
    .logo-light { display: none; }
    .logo-dark { display: block; }
  }
</style>

Performance Tips

Optimize SVG

<!-- Use smallest necessary size -->
<img src="imgs/typedialog_icon_s.svg" alt="TypeDialog" width="32">

<!-- Avoid huge SVGs if PNG export available -->
<img src="imgs/typedialog_logo_h.png" alt="TypeDialog" width="240">

CSS Loading

/* Avoid multiple requests -->
.logo-light { background-image: url('imgs/typedialog_logo_h.svg'); }
.logo-dark { background-image: url('imgs/typedialog_logo_h_bn.svg'); }

/* Use data URIs for very small files */
.logo { background-image: url('data:image/svg+xml;...'); }

Caching

<!-- SVGs are cacheable -->
<img
  src="imgs/typedialog_logo_h.svg?v=1.0"
  alt="TypeDialog"
/>

<!-- Or use service workers for offline support -->

Accessibility

Alt Text

<!-- Always include meaningful alt text -->
<img src="imgs/typedialog_logo_h.svg" alt="TypeDialog">

<!-- In links, alt is sometimes in parent -->
<a href="/">
  <img src="imgs/typedialog_icon.svg" alt="Home">
</a>

ARIA Labels

<!-- For complex contexts -->
<img
  src="imgs/typedialog_logo_h.svg"
  alt="TypeDialog"
  aria-label="TypeDialog - Typed dialogs for inputs, forms and schemas you can trust"
/>

Animation Preferences

/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
  /* Option 1: Use static version */
  img.logo { content: url('imgs/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 <link> tags are in <head>
  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: 
    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 <style> block
  4. Test in modern browser (Chrome 90+)

Color Issues in Print

Problem: Colors look different in print Solutions:

  1. Use _bn (black & white) versions for print
  2. Export to PDF instead of PNG
  3. Adjust DPI (300 DPI for professional print)
  4. Test color profile (RGB vs CMYK)

Export & File Conversion

PNG Export

# Using Inkscape
inkscape typedialog_logo_h.svg --export-filename=typedialog_logo_h.png

# Using ImageMagick
convert typedialog_logo_h.svg typedialog_logo_h.png

# Using online tool
# https://convertio.co/svg-png/

PDF Export

# Using Inkscape
inkscape typedialog_logo_h.svg --export-filename=typedialog_logo_h.pdf

Summary Checklist

  • Choose variant based on use case
  • Include alt text on all images
  • Test sizing at target resolution
  • Verify color contrast on backgrounds
  • Check animation preference support
  • Optimize file size for web
  • Test on target browsers
  • Cache-bust SVG if needed
  • Document source file location
  • Use consistent sizing across site

Need Help? Refer to BRANDING.md for philosophy and typedialog_logo_specs.html for technical details.