vue-material-design-icons2
v1.4.3
Published
A collection of material design icons as Vue single file components
Downloads
8
Maintainers
Readme
Vue Material Design Icon Components
Forked from: https://gitlab.com/robcresswell/vue-material-design-icons/
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.
Getting started
Install the package
npm install --save vue-material-design-icons
OR
yarn add vue-material-design-icons
Optional, but recommended Add the included stylesheet to your root JS file, usually
index.js
ormain.js
:import "vue-material-design-icons/styles.css"
Import the icon, and declare it as a local component:
import MenuIcon from "vue-material-design-icons/menu.vue" components: { MenuIcon }
OR
Declare it as a global component:
import MenuIcon from "vue-material-design-icons/menu.vue" Vue.component("menu-icon", MenuIcon)
Note Icon files are kebab cased, e.g.
checkbox-marked-circle.vue
, and their default name has-icon
appended e.g.checkbox-marked-circle-icon
.Then use it in your template code!
<menu-icon />
Props
title
- This changes the hover tooltip as well as the title shown to screen readers. By default, those values are a "human readable" conversion of the icon names; for examplechevron-down-icon
becomes "Chevron down icon".Example:
<android-icon title="this is an icon!" />
decorative
- This denotes whether an icon is purely decorative, or has some meaninfgul value. If an icon is decorative, it will be hidden from screen readers. By default, this isfalse
.Example:
<android-icon decorative />
iconClass
- add classes to the<svg>
element. It will use global scope.Example:
<!-- There can be more than one --> <android-icon iconClass="secondary material-body-1" />
size
- By default, the icons are set to 24dp (Thesvg
element will havewidth
andheight
set to 24px). But There are some other dimensions available:"normal"
: 24px (by default)"big"
: 48px"medium"
: 36px"small"
: 18px- or you can pass any string of valid length values ("20px", "1em", ...)
Example:
<sofa-icon size="1em" /> <android-icon size="big" />
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"
Icons
A list of the icons can be found at the
Material Design Icons website. The icons packaged here match the names
displayed on the website, such as ultra-high-definition
, with the .vue
extension; that icon would be imported as
"vue-material-design-icons/ultra-high-definition.vue"
.
Tips
Use
resolve
in your Webpack config to clean up the imports:resolve: { alias : { "icons": path.resolve(__dirname, "node_modules/vue-material-design-icons") }, extensions: [ ".vue" ] }
This will give you much shorter and more readable imports, like
import Android from "icons/android"
, rather thanimport Android from "vue-material-design-icons/android.vue"
. Much better!Add click handlers to the icons with
@click.native
. For example:<fullscreen-icon @click.native="myMethod" />
You can learn more about this by reading the Vue docs on [Binding Native Events to Components] (https://vuejs.org/v2/guide/components.html#Binding-Native-Events-to-Components)
Credits
Rob Cresswell / robcresswell for original repo project.
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.