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

levrik/mdi-react: Material Design Icons for React/Preact packaged as single comp ...

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

开源软件名称(OpenSource Name):

levrik/mdi-react

开源软件地址(OpenSource Url):

https://github.com/levrik/mdi-react

开源编程语言(OpenSource Language):

JavaScript 76.6%

开源软件介绍(OpenSource Introduction):

mdi-react npm package Material Design Icons version build status

Material Design Icons for React/Preact packaged as single components

New v9.0.0 released: See CHANGELOG.md

Installation

npm install mdi-react
# or if you use Yarn
yarn add mdi-react

Support for Preact is available via the mdi-preact package.
The mdi-preact package supports class as alternative to className.

Usage

Just search for an icon on materialdesignicons.com and look for its name.
The name translates to PascalCase followed by the suffix Icon in mdi-react.
Also it's possible to import with an alias. You can find them on the detail page of the respective icon.

For example the icons named alert and alert-circle:

import AlertIcon from 'mdi-react/AlertIcon';
import AlertCircleIcon from 'mdi-react/AlertCircleIcon';

const MyComponent = () => {
  return (
    <div>
      {/* The default color is the current text color (currentColor) */}
      <AlertIcon color="#fff" />
      {/* The default size is 24 */}
      <AlertCircleIcon className="some-class" size={16} />
      {/* This sets the icon size to the current font size */}
      <AlertIcon size="1em" />
    </div>
  );
};

To change the color on hover you can just use your own class and plain CSS.

.some-class:hover {
  fill: red;
}

You can also add default styling via the mdi-icon class.

.mdi-icon {
  background-color: green;
}



鲜花

握手

雷人

路过

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

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

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

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

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