SvelteKit plugin that makes it possible to import SVG files as Svelte components, inline SVG code or urls
MIT License
@rollup/pluginutils
needs to be a dependency. This should fix #54
Published by poppa 10 months ago
SVGs imported as URLs (import svgUrl from ./some.svg?url
) will now be SVGO optimized before written to disk on production builds.
NOTE: SVGs imported as URLs will not be optimized in dev
mode.
This should fix #52
Published by poppa about 1 year ago
This will include the map
property as well.
This should fix #48.
Published by poppa about 1 year ago
The css
option to Svelte compile()
has changed and setting it to a boolean
value has been deprecated.
This gave the compilerOptions.css as a boolean is deprecated. Use 'external' instead of false. warning.
Since we're disregarding the css
field in the generated result, we can set this option to none
and skip all CSS stuff altogether.
Published by poppa about 1 year ago
This is a function that lets the consumer transform the SVG into a Svelte component before being passed to the Svelte compiler.
Published by poppa about 1 year ago
This is to prevent Svelte having to parse the entire SVG.
Thanks @aradalvand for the code.
This solves #39
Published by poppa over 1 year ago
This release supports Svelte 4
Published by poppa over 1 year ago
This is a maintenance release with no code changes
app.d.ts
to svg.d.ts
since Svelte doesn't like these typings inapp.d.ts
(see issue 25)svg.d.ts
to dist/
on build.Published by poppa over 1 year ago
Support for the SVGO datauri option in the dataurl
query parameter. This means that ?dataurl=base64
, ?dataurl=enc
and ?dataurl=unenc
works.
This solves #32
Published by poppa over 1 year ago
Keep the generated source map
This removes the "Sourcemap is likely to be incorrect: a plugi
(sveltekit-svg) was used to transform files..." warning seen when using this
plugin outside of SvelteKit
Published by poppa over 1 year ago
Hot-reload is working for component instances, that is editing a SVG imported as a component will hot-reload it. SVG:s imported a URL:s will require a page reload.
This solves issue #30
Published by poppa almost 2 years ago
No code changes, it's a pure maintenance release
Published by poppa almost 2 years ago
This release has no code changes, but adds support for Vite 4 which the latest SvelteKit uses
This should solve #28.
Published by poppa almost 2 years ago
This is the name of the app's ambient .d.ts file that SvelteKit will look for.
No code or other functionality changes in this release.
Published by poppa almost 2 years ago
We now support generating inline data URLs (data:image/svg+xml;base64,...
),
which can be used in <img src>
attributes, by appending the querystring
variable ?dataurl
to an SVG import.
<script>
import icon1 from `$assets/icon1.svg?dataurl`
</script>
<img src={icon1} />
?dataurl
differs from ?url
in that SVGO optimization/transform will be
applied to the SVG before it's turned into a data URL.
Published by poppa almost 2 years ago
Use the proper Vite Plugin
type. The transform signature wasn't 100%
compatible with the Plugin
interface and would cause errors when the
Vite config file is a Typescript file (e.g. vite.config.ts
)
The suggested *.svg?component
type definition now has a proper Svelte
typed component interface
declare module '*.svg?component' {
const content: ConstructorOfATypedSvelteComponent
export default content
}
Published by poppa about 2 years ago
vite.config.js
instead of svelte.config.js
in README.Published by poppa over 2 years ago
Thanks to Miguel Camba for the contribution.
false
as value to the SVGO option you can bypass SVGO altogether.Published by poppa over 2 years ago
It's now possible to pass multiple svg
transformers based on path prefixes if you want to apply different SVGO options for SVGs in different locations.
Example:
const config = {
...,
kit: {
...,
vite: {
plugins: [
svg({
includePaths: ["./src/lib/icons/", "./src/assets/icons/"],
svgoOptions: {
multipass: true,
plugins: [
"preset-default", {
name: "removeAttrs", params: { attrs: "(fill|stroke)" }
}
],
},
}),
svg({
includePaths: ["./src/lib/graphics/"],
svgoOptions: {
multipass: true,
plugins: ["preset-default" ],
},
}),
]
}
}
}
Published by poppa almost 3 years ago
Updated README to better reflect reality
No code changes
This closes #15