@maxle5/mdi-vue3
v7.4.47
Published
A collection of Vue single-file components (Vue 3) for rendering Material Design Icons. This library **sources its icons weekly** from [@mdi/js](https://github.com/Templarian/MaterialDesign-JS), to ensure comprehensive icon coverage.
Downloads
6
Maintainers
Readme
@maxle5/mdi-vue3
A collection of Vue single-file components (Vue 3) for rendering Material Design Icons. This library sources its icons weekly from @mdi/js, to ensure comprehensive icon coverage.
With full treeshaking support, your application will only include the icons you actually use, optimizing performance and reducing bundle size.
Getting started
Install the package
yarn add @maxle5/mdi-vue3
OR
npm i @maxle5/mdi-vue3
Import the icon, and declare it as a local component:
import { MdiMenu } from '@maxle5/mdi-vue3'; components: { MdiMenu; }
OR
Declare it as a global component:
import { MdiMenu } from '@maxle5/mdi-vue3'; Vue.component('mdi-menu', MdiMenu);
Note This library exports Icons in pascal case with a prefix of
Mdi
, e.g.MdiCheckboxMarkedCircle
Then use it in your template code!
<mdi-menu />
Props
size
- This property overrides thewidth
andheight
attributes on the SVG. The default is24
.Example:
<mdi-android :size="48" />
Icons
A list of the icons can be found at the
Material Design Icons website. The icons packaged here are pascal cased
versions of the names displayed on the website, to match the
Vue Style Guide. For example, the icon
named ultra-high-definition
would be imported as
import { MdiUltraHighDefinition } from "@maxle5/mdi-vue3"
.