Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/vdegenne/vite-plugin-mdicon2svg

Plugin to transform md-icon to svgs
https://github.com/vdegenne/vite-plugin-mdicon2svg

Last synced: 13 days ago
JSON representation

Plugin to transform md-icon to svgs

Host: GitHub
URL: https://github.com/vdegenne/vite-plugin-mdicon2svg
Owner: vdegenne
License: mit
Created: 2024-01-25T15:44:02.000Z (11 months ago)
Default Branch: main
Last Pushed: 2024-12-01T15:04:01.000Z (about 1 month ago)
Last Synced: 2024-12-01T15:12:40.517Z (about 1 month ago)
Language: TypeScript
Size: 104 KB
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE

Awesome Lists containing this project

README

# vite-plugin-mdicon2svg

Inline SVGs in place of `` 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

```js
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.com` servers 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:

```js
plugins: [mdicon2svg()];
```

And add the following to your html to display the icons:

```html

```

_(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:

```js
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:

```html
star ⭐😄👍
```

### Install

```
npm i -D vite-plugin-mdicon2svg
```

## Known limitations

- This plugin relies on `lit-html`, and the SVGs are wrapped inside `html` tagged templates. That means you will need `lit-html` (or `lit`) installed in your project. That also means icons in raw html files won't get inlined.

## License