• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

robcresswell/vue-material-design-icons: Material Design Icons as Vue Single File ...

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称(OpenSource Name):

robcresswell/vue-material-design-icons

开源软件地址(OpenSource Url):

https://github.com/robcresswell/vue-material-design-icons

开源编程语言(OpenSource Language):

JavaScript 93.2%

开源软件介绍(OpenSource Introduction):

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.

Getting started

  1. Install the package

    yarn add vue-material-design-icons

    OR

    npm i vue-material-design-icons
  2. 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 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 'vue-material-design-icons/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 "vue-material-design-icons/UltraHighDefinition.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 than import Android from "vue-material-design-icons/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

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.




鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
forehalo/materialize-blog: redesign blog using material design发布时间:2022-08-17
下一篇:
sasa95/pomodor: Material design pomodoro timer app发布时间:2022-08-17
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap