sveltekit-svg

@rollup/pluginutils needs to be a dependency. This should fix #54

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

This will include the map property as well.

This should fix #48.

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.

This is a function that lets the consumer transform the SVG into a Svelte component before being passed to the Svelte compiler.

This is to prevent Svelte having to parse the entire SVG.

Thanks @aradalvand for the code.

This solves #39

This release supports Svelte 4

This is a maintenance release with no code changes

• Updated all NPM packages
• Renamed app.d.ts to svg.d.ts since Svelte doesn't like these typings in
  app.d.ts (see issue 25)
• Also copy svg.d.ts to dist/ on build.
• Some fixes to the README file
• Thanks to @joakimnordling for PR #35

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

• 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

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

No code changes, it's a pure maintenance release

This release has no code changes, but adds support for Vite 4 which the latest SvelteKit uses

This should solve #28.

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.

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.

• 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
  }
  

Changed

• Use vite.config.js instead of svelte.config.js in README.
  Thank you Arad for the PR

Thanks to Miguel Camba for the contribution.

Added

• By giving false as value to the SVGO option you can bypass SVGO altogether.
  This is useful when optimization might break SVG animations and alike.

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" ],
          },
        }),
      ]
    }
  }
}

Updated README to better reflect reality

No code changes

This closes #15