Styling

CSS Custom Properties

The <icoglyph-svg> web component renders inside a Shadow DOM. All visual styling is controlled through CSS custom properties that pierce the shadow boundary.

Inline Styles

Set custom properties directly on the element via the style attribute for per-icon overrides.

<icoglyph-svg
  use="arrow-right"
  style="--ig-stroke: #2563eb; --ig-stroke-width: 0.5rem; --ig-fill: rgba(37, 99, 235, 0.1);"
></icoglyph-svg>

Global Styling via CSS

Apply a consistent style to all icons in a section, page, or the entire app with a CSS rule.

icoglyph-svg {
  --ig-stroke: #374151;
  --ig-stroke-width: 0.35rem;
  --ig-stroke-linecap: round;
  --ig-stroke-linejoin: round;
  --ig-fill: none;
  width: 32px;
  height: 32px;
}

/* Override for a specific context */
.nav icoglyph-svg {
  --ig-stroke: currentColor;
  --ig-stroke-width: 0.3rem;
  width: 20px;
  height: 20px;
}

Hover Effects with --ig-transition

Use --ig-transition to animate CSS properties (opacity, stroke color, etc.) on hover. This is a standard CSS transition value applied to the inner SVG and has no effect on the path morph animation.

icoglyph-svg {
  --ig-transition: opacity 0.15s ease;
  cursor: pointer;
}
icoglyph-svg:hover {
  --ig-stroke-opacity: 0.6;
}

Shadow DOM Part

The inner <svg> element is exposed as a CSS part named svg. Use the ::part(svg) pseudo-element to apply styles that CSS custom properties cannot cover, such as filters, transforms, or pointer-events.

icoglyph-svg::part(svg) {
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
}

.interactive icoglyph-svg::part(svg) {
  transition: transform 0.2s ease;
}
.interactive icoglyph-svg:hover::part(svg) {
  transform: scale(1.1);
}

Theme Support

Since icons inherit their style from CSS custom properties, switching between light and dark themes is straightforward. Define per-theme values on a parent selector or with prefers-color-scheme.

.light icoglyph-svg {
  --ig-stroke: #374151;
  --ig-stroke-width: 0.35rem;
}

.dark icoglyph-svg {
  --ig-stroke: #e5e7eb;
  --ig-stroke-width: 0.35rem;
}

/* Or with media query */
@media (prefers-color-scheme: dark) {
  icoglyph-svg {
    --ig-stroke: #e5e7eb;
  }
}

Setting --ig-stroke: currentColor makes the icon inherit the text color of its parent, which is often the simplest way to support themes.

Responsive Sizing

The component's host element defaults to display: block; width: 100%; height: 100% and fills its parent. If the parent has no explicit size, the icon collapses to zero. Always set a size on the host element itself or on a sized wrapper.

/* Fixed size, most common */
icoglyph-svg { width: 48px; height: 48px; }

/* Fill a sized wrapper */
.icon-wrapper { width: 100px; height: 100px; }
.icon-wrapper icoglyph-svg { width: 100%; height: 100%; }

/* Responsive with clamp */
icoglyph-svg { width: clamp(24px, 4vw, 64px); height: clamp(24px, 4vw, 64px); }