vite-plugin-mdicon2svg v0.0.4
vite-plugin-mdicon2svg
Inline SVGs in place of <md-icon> in your project.
Key features:
- đĨ SVGs are cached to minimize network solicitation
- đ SVGs are module-virtualized to avoid inline duplication and to help code-splitting.
- đ ī¸ Some options to customize the SVGs and/or match your configuration needs.
Usage
import {mdicon2svg} from 'vite-plugin-mdicon2svg';
export default defineConfig({
plugins: [mdicon2svg({devMode: true})],
});devMode: true indicates to download and inline SVGs during development (or else it's done only during build time by default).
However this is not the recommended approach for 2 reasons:
- A request is made to
fonts.gstatic.comservers for each new icon added inside your source if they are not cached yet. - Your source is re-analyzed on new changes so it can make development slower on older machines and delay page refresh.
Here's the recommended approach instead, remove devMode option:
plugins: [mdicon2svg()];And add the following to your html to display the icons:
<head>
<link
id="symbols"
href="https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined"
rel="stylesheet"
/>
</head>(note: it's important to include id="symbols" in the tag here to inform the plugin to remove this link at build time.)
Now you can dev using normal symbols and at build time SVGs will be downloaded and inlined.
Variant
You can pass the variant you want in the options:
plugins: [
mdicon2svg({
variant: 'rounded', // 'outlined' by default
}),
];Fill
Sometimes your app needs some filled icons, you can write the following to instruct the plugin to inline the correct icon:
<md-icon fill>star</md-icon> âđđInstall
npm i -D vite-plugin-mdicon2svgKnown limitations
- This plugin relies on
lit-html, and the SVGs are wrapped insidehtmltagged templates. That means you will needlit-html(orlit) installed in your project. That also means icons in raw html files won't get inlined.
License
MIT Šī¸ 2024 vdegenne