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.
Compile-time validation
Literal HEEx paths are checked at compile time via attr :path's :values.
Unknown names emit a warning (fatal with --warnings-as-errors). Dynamic
paths raise ArgumentError at runtime.
Dynamic paths
When the path is only known at runtime (e.g. path={"icons/#{@name}"}), use
dynamic_inline_svg/1. Same behaviour and options, but skips the
compile-time values: check so interpolated strings don't trip
--warnings-as-errors. Runtime lookup still raises ArgumentError for
unknown names.
<.inline_svg path="check" /> # compile-checked
<.dynamic_inline_svg path={"icons/#{@name}"} /> # runtime-checked