npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

vue3-material-design-icons-ts

v5.0.10

Published

A collection of material design icons as Vue single file components

Downloads

60

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

  1. Install the package

    yarn add vue3-material-design-icons-ts

    OR

    npm i vue3-material-design-icons-ts
  2. 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 has Icon appended e.g. CheckboxMarkedCircleIcon.

  3. Then use it in your template code!

    <menu-icon />
  4. 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 a title 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 as fill: currentColor; provided by the optional CSS file, may override colours set with this prop.

    Example:

    <android-icon fillColor="#FF0000" />
  • size - This property overrides the width and height attributes on the SVG. The default is 24.

    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 than import 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 the Props 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.