AngularLynx

    <svg>

    Draws SVG from a markup string or a URL. Unlike HTML, you can't write SVG tags in the template: pass the markup as text, and give the element a width and height.

    element-svgsrc/app/app.ts

    Usage

    src/app/dot.ts
    import { Component } from '@angular/core';
import { LYNX_ELEMENTS } from '@blotch/angular-lynx';

@Component({
  selector: 'app-dot',
  imports: [LYNX_ELEMENTS],
  template: `<svg [content]="icon" style="width: 24px; height: 24px;" />`,
})
export class Dot {
  readonly icon = `<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
    <circle cx="12" cy="12" r="10" fill="#dd0031" />
  </svg>`;
}

    Import LYNX_ELEMENTS in your component (see Elements).

    Warning

    Needs XElement in custom native apps (see Embedding).

    Attributes

    AttributeTypeDefaultDescription
    contentstring—SVG markup to draw. It can't use CSS variables or the page's styles. Draw lines with <path>: <line> doesn't show on iOS and Android. AngularLynx removes stroke-dasharray values iOS can't parse, such as none, which would blank every SVG in the app.
    srcstring—URL of an SVG file. Use src or content, not both.
    current-colorstring—iOS (Lynx 4.1 and later) and Android. The color currentColor stands for in the SVG. It doesn't override an explicit fill or stroke.

    Plus the common attributes, such as id, class and style.

    Events

    EventdetailDescription
    bindload{ width: number; height: number }The SVG was drawn.

    Plus the common events, such as bindtap.

    • <image>: PNG, JPEG, WebP and GIF images
    • Icon: the UI component that draws icons with <svg>
    • Chart: charts drawn with <svg>