v0.5.0
An icon set is a folder of SVG files. Put the folder in app/icons/ and it
becomes a sheet of its own, referenced by library and name.
Both packages move together: @transclude/core and @transclude/create are
0.5.0.
npm install @transclude/core@latestBefore you upgrade
Coming from 0.4.0: a subdirectory of app/icons/ means something new.
0.4.0 read the whole tree flat, so lucide/check.svg was /icons.svg#check.
It is /lucide.svg#check now. A page still pointing at the old URL renders an
empty box rather than an error. Search your markup for icons.svg# if you
nested anything.
Coming from 0.3.0 or earlier: app/icons/ is read at all. iconsDir
defaults to 'icons', so a project already keeping SVG files there starts
compiling them. If one has no viewBox, the build stops and names the file.
Set iconsDir to null if that directory holds something else:
export default {
iconsDir: null,
};A project with no app/icons/ sees no change either way.
New
A subdirectory is a library. This is the whole feature, and it is the flow
you already have: download an icon set, put the folder in, use it.
app/
icons/
check.svg /icons.svg#check
lucide/
check.svg /lucide.svg#check
arrow-right.svg /lucide.svg#arrow-right
Nothing is renamed to get there. Two libraries may each have a check, because
they are different files in different sheets.
<svg width="16" height="16"><use href="/lucide.svg#check"></use></svg>Files loose at the top are the icons library, which is why they keep the
/icons.svg they had.
A new project comes with the element. npm create @transclude writes
app/elements/svg-icon.html, which takes library beside name:
<svg-icon name="check"></svg-icon>
<svg-icon library="lucide" name="check" label="Mark as done"></svg-icon>The framework still defines no elements, and this one is not an exception: it is
scaffolded, so it is your file. Change the sizing, add a class, delete it. It
ships because the accessibility half is the half that fails quietly. An icon
that is hidden and labelled at once announces nothing, and one that is neither
announces its file name. The file gets both spellings right on the first day,
and test/create.test.js holds them.
An existing project has no such file. The icons
page has it to copy.
A library is one flat directory. lucide/arrows/up.svg is refused rather
than flattened or skipped. Flattening would give two files one id, which is the
collision libraries exist to end, and skipping loses an icon without saying so.
Move the directory up to be a library of its own.
A name no library answers to is a 404. /lucdie.svg is a typo, and an empty
sprite is a bad way to find that out.
Changed
Two files may share a name now. 0.4.0 refused it, because a flat tree gave
them one id. In different libraries they are different icons and nothing
complains. In one library the filesystem already prevents it.
A library claims a URL at the site root. app/icons/lucide/ answers for
/lucide.svg, so a file you write at app/public/lucide.svg asks for the same
URL. The build and the dev server both stop until one is renamed. Public files
you have not named after a library are served exactly as before, including an
SVG: the public handler is asked first.
Full documentation at transclude.dev.
A note on the version
Below 1.0, a minor may break something, and this one does: a nested icon file
changes URL. 0.4.0 was published the same day and this is the correction to
it, so the window where anyone is affected is small. The first section says what
to look for.
Full changelog: v0.4.0...v0.5.0