SVG
Import, auto-optimize, and inline SVG files in your HTML templates. Uses SVGO under the hood.
Usage
📄 /src/modules/my-partial.ts
import { htmlconst html: (strings: TemplateStringsArray, ...values: unknown[]) => TemplateResult<1>Interprets a template literal as an HTML template that can efficiently
render to and update a container.
const header = (title: string) => html`<h1>${title}</h1>`;
The html tag returns a description of the DOM to render as a value. It is
lazy, meaning no work is done until the template is rendered. When rendering,
if a template comes from the same expression as a previously rendered result,
it's efficiently updated instead of replaced.
} from 'lit';
import myIconconst myIcon: TemplateResult<1> from '../assets/icons/my-icon.svg';
export const myPartialconst myPartial: TemplateResult<1> = htmlconst html: (strings: TemplateStringsArray, ...values: unknown[]) => TemplateResult<1>Interprets a template literal as an HTML template that can efficiently
render to and update a container.
const header = (title: string) => html`<h1>${title}</h1>`;
The html tag returns a description of the DOM to render as a value. It is
lazy, meaning no work is done until the template is rendered. When rendering,
if a template comes from the same expression as a previously rendered result,
it's efficiently updated instead of replaced.
`
<!-- -->
<div>${myIconconst myIcon: TemplateResult<1> }</div>
`;
Installation
npm i @gracile/svg
Tip
You can use this extension with any Vite+Lit setup!
It’s totally decoupled from the framework.
📄 /vite.config.ts
import { defineConfigfunction defineConfig(config: UserConfig): UserConfig (+3 overloads)Type helper to make it easier to use vite.config.ts
accepts a direct
{@link
UserConfig
}
object, or a function that returns it.
The function receives a
{@link
ConfigEnv
}
object.
} from 'vite';
import { viteSvgPluginfunction viteSvgPlugin(svgoOptimizeOptions?: Omit<Config, "path">): any[] } from '@gracile/svg/vite';
export default defineConfigfunction defineConfig(config: UserConfig): UserConfig (+3 overloads)Type helper to make it easier to use vite.config.ts
accepts a direct
{@link
UserConfig
}
object, or a function that returns it.
The function receives a
{@link
ConfigEnv
}
object.
({
// ...
pluginsUserConfig.plugins?: PluginOption[] | undefinedArray of vite plugins to use.
: [
viteSvgPluginfunction viteSvgPlugin(svgoOptimizeOptions?: Omit<Config, "path"> | undefined): any[] ({
}),
// ...
],
});
See the optimizations options for SVGO.