ICON助手

# Material Design Icons 使用教程

# 通过网页字体/SCSS (Webfont / SCSS ) : MaterialDesign-Webfont

首先引入 CSS文件

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@5.0.45/css/materialdesignicons.min.css">

在页面中加入代码(用span或者 i包裹)：

<span class="mdi mdi-name"></span>

效果如下：

# 大小

mdi-18px mdi-24px mdi-36px mdi-48px

# 角度

mdi-rotate-45 mdi-rotate-90 mdi-rotate-135 mdi-rotate-180 mdi-rotate-225 mdi-rotate-270

# 翻转

mdi-flip-v

# 旋转

mdi-spin

# 颜色

# 通过 JavaScript/TypeScript: MaterialDesign-JS

首先安装@mdi/js

npm install @mdi/js

用法：

import { mdiAccount } from '@mdi/js'
console.log(mdiAccount); // "M...Z"

# ReactJS :MaterialDesign-React

通过这个模块，在React中，Material Design Icons可以被当成自定义组件使用。

安装@mdi/react

npm install @mdi/react --save-dev

示例

import React, { Component } from 'react';
import Icon from '@mdi/react';
import { mdiAccount } from '@mdi/js';

class App extends Component {
  render() {
	return (
	  <Icon path={mdiAccount}
		size={1}
		horizontal
		vertical
		rotate={90}
		color="red"/>
	);
  }
}

Stack用法

	import React, { Component } from 'react';
	import Icon, { Stack } from '@mdi/react';
	import { mdiAccount, mdiBlockHelper } from '@mdi/js';

	class App extends Component {
	  render() {
		return (
		  <Stack color="#444">
			<Icon path={mdiAccount}/>
			<Icon path={mdiBlockHelper}
			  color="red"/>
		  </Stack>
		);
	  }
	}

# SVG / Meta.json : MaterialDesign-SVG

直接安装下载即可使用svg

  npm install @mdi/svg

# Desktop Font : MaterialDesign-Font

Material Design Icon助手支持中文搜索图标，通过它可以复制字体字符、SVG、codepoint、字符名称，也可以选择尺寸、颜色后进行导出，支持svg/png格式。