vue3-material-design-icons-ts
v5.0.10
Published
A collection of material design icons as Vue single file components
Downloads
60
Maintainers
Readme
Vue Material Design Icon Components
This library is a collection of Vue single-file components to render Material Design Icons, sourced from the MaterialDesign project. It also includes some CSS that helps make the scaling of the icons a little easier. Edit: 2022-03-09 by lacrioque
- Updated the components to be ts compatible
- Added general index to be validly importable
Getting started
Install the package
yarn add vue3-material-design-icons-ts
OR
npm i vue3-material-design-icons-ts
Import the icon, and declare it as a local component:
File based style
import MenuIcon from 'vue3-material-design-icons-ts/dist/Menu.vue'; components: { MenuIcon; }
Alternatively name based style
import { MenuIcon } from 'vue3-material-design-icons-ts'; components: { MenuIcon; }
OR
Declare it as a global component:
import { MenuIcon } from 'vue3-material-design-icons-ts'; Vue.component('menu-icon', MenuIcon);
Note Icon files are pascal cased, e.g.
CheckboxMarkedCircle.vue
, and their default name hasIcon
appended e.g.CheckboxMarkedCircleIcon
.Then use it in your template code!
<menu-icon />
Optional Add the included stylesheet. This few lines of CSS will cause the icons to scale with any surrounding text, which can be helpful when you primarily style with CSS. Note that if you intend to handle sizing with the
size
prop, you probably don't want to use this as it may conflict.import 'vue3-material-design-icons-ts/styles.css';
Props
title
- This changes the hover tooltip as well as the title shown to screen readers. For accessibility purposes, if atitle
is not provided, then the icon is hidden from screen readers. This is to force developers to use meaningful titles for their icon usage.Example:
<android-icon title="this is an icon!" />
fillColor
- This property allows you to set the fill colour of an icon via JS instead of requiring CSS changes. Note that any CSS values, such asfill: currentColor;
provided by the optional CSS file, may override colours set with this prop.Example:
<android-icon fillColor="#FF0000" />
size
- This property overrides thewidth
andheight
attributes on the SVG. The default is24
.Example:
<android-icon :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
"vue3-material-design-icons-ts/dist/UltraHighDefinition.vue"
.
Tips
Use
resolve
in your Webpack config to clean up the imports:resolve: { alias : { "icons": path.resolve(__dirname, "node_modules/vue3-material-design-icons-ts/dist") }, extensions: [ ".vue" ] }
This will give you much shorter and more readable imports, like
import Android from "icons/Android"
, rather thanimport Android from "vue3-material-design-icons-ts/Android.vue"
. Much better!If you want custom sizing, add your own css to adjust the height and width of the icons
.material-design-icon.icon-2x { height: 2em; width: 2em; } .material-design-icon.icon-2x > .material-design-icon__svg { height: 2em; width: 2em; }
Then add your size class
<fullscreen-icon class="icon-2x" />
While I recommend using CSS for styling, you can also pass in a
size
prop, detailed in theProps
section above.
Credits
Rob Creswell for being the generally best for vue2!
Austin Andrews / Templarian for the MaterialDesign project. This supplies the SVG icons for this project, which are packaged as Vue single file components.
Elliot Dahl for this article on prototypr.io. This is where the recommended CSS comes from.
Attila Max Ruf / therufa for the mdi-vue library which inspired this one. It also produces single file components from material design icons.