Stencil.Component (Stencil v0.2.0)

Copy Markdown View Source

Compile-time SVG inliner for Phoenix components.

Drop use Stencil.Component into any module to expose an inline_svg/1 Phoenix component. SVGs under the configured directory are read and embedded at compile time; the running app performs no disk I/O.

defmodule MyAppWeb.InlineSVG do
  use Stencil.Component
end

<.inline_svg path="check" />
<.inline_svg path="arrow-right" class="w-6 h-6" />
<.inline_svg path="icons/star" />
<.inline_svg path="logo" strip_styling={false} />

Options

  • :dir — directory to scan, relative to the project root (or an absolute path). Defaults to "priv/svg".

Styling

By default the SVG's own class, fill, stroke, stroke-width, and style attributes are stripped so page CSS controls the visual. Pass strip_styling={false} to keep the original attributes.

The wrapping <svg> tag gets a data-inline-svg="<path>" marker (or data-inline-svg-styled when styling is kept) plus any extra attributes you pass through.