Skip to content

v0.4.0

Choose a tag to compare

View all tags
@github-actions github-actions released this 05 Aug 16:25
v0.4.0
05daa35

Icons are a directory of SVG files you manage yourself. The build compiles them
into one sprite, and a page points at it.

Both packages move together: @transclude/core and @transclude/create are
0.4.0.

npm install @transclude/core@latest

Before you upgrade

app/icons/ is read now. iconsDir defaults to 'icons', so a project
already keeping SVG files there starts compiling them into /icons.svg. If one
of them has no viewBox, or two share a file name, the build stops and names the
file. That is the check doing its job, and it is also a build that passed
yesterday.

Set iconsDir to null if that directory holds something else:

export default {
  iconsDir: null,
};

A project with no app/icons/ sees no change.

New

A directory of SVG files becomes one sprite. One file per icon, which is a
whole SVG document you can open, edit and diff.

app/
  icons/
    check.svg
    chevron-down.svg

The build writes /icons.svg, one document of <symbol>s. The file name is the
id, and <use> points at it.

<svg width="16" height="16"><use href="/icons.svg#check"></use></svg>

One request serves every icon on the site, and the browser caches it. A page
showing twenty icons still makes one, and the second page costs nothing. The
same bytes are in the bundle a worker imports, so this works on Node, Bun, Deno
and workerd.

What the file says about paint is kept. fill="none" stroke="currentColor"
is how most icon sets say what they are, and dropping it turns every icon into a
black blob. viewBox is carried over too. width and height are dropped,
because they fight whatever CSS sizes the icon.

The build refuses rather than warns, because each of these renders and reads
as a stylesheet problem. A file with no viewBox scales wrong. Two files
claiming one name leave the second unreachable. A hand-written
app/public/icons.svg asks for the same URL as the sprite, so both the build and
the dev server stop until one is renamed.

The dev server builds the sprite per request, so adding an icon shows up on
reload. A refusal reads there as the same message that would stop the build.

No icon element ships with this. Elements come from your elements/
directory. Most apps want to write a name instead of a URL, which is six lines,
and the icons page has the one to copy:

<svg-icon name="check"></svg-icon>
<svg-icon name="check" label="Mark as done"></svg-icon>

The first is decorative and hidden from a screen reader, which is right when the
icon sits beside its own label. The second is announced, which is what a control
holding nothing but an icon needs.

Also

The skill shipped in the package knows about icons. An agent working in a project
gets the directory, the config key and the element without reading the site.

Two refusals are written down on
decisions and limits: <transclude>
does not import an SVG file, and no icon element ships with the framework.

Full documentation at transclude.dev.

A note on the version

Below 1.0, a minor may break something. This one adds a directory a project may
already have for its own reasons, which is the single place it can surprise you.
The section at the top says what to do about it.

Full changelog: v0.3.0...v0.4.0

Assets 2
Loading