创建一个 Material 图标组件，可以更方便在应用里面使用 Material Design 的小图标 .. 组件的名字可以叫 MaterialIcon .. 使用这个组件的时候给它提供一个 icon 属性，对应的值是要显示的小图标的名字 ..

还可以有一个 size 属性，它可以设置图标的大小 .. 再添加一个 color 属性， 设置小图标的颜色 ..

在这个文件的顶部 .. 导入 MaterialIcon 组件 .. 位置是上一级目录的上一级目录下面的 components 里的 material-icon ..

下面在 components 里面，去创建这个组件 .. 放在 material-icon 目录的下面，文件的名字是 index.js ..

文件里面添加一个基本的组件 .. 名字是 MaterialIcon .

WsComponent

这个组件里面需要一个特别的功能 .. 这个要特别的功能在 taro-ui 的基础组件里面 .. 在 node_modules 里面 .. 找到 taro-ui ... 在 dist .. weapp .. common 里面 .. 打开 component.js .. 复制一下这个文件里的代码 ..

然后在我们自己的项目的组件里面 .. 新建一个 base 组件 .. 把复制的代码粘贴到这里 .. 修改一下这个类的名字 .. 可以叫它 WsComponent ..

我们需要的就是这个 mergeStyle 方法 ..

MaterialIcon

再回到创建的 MaterialIcon 组件 .. 去掉导入的 Component .. 下面再导入刚才创建的 base 组件 .. 名字是 WsComponent 位置是上一级目录里的 base ..

让 MaterialIcon 继承 WsComponent ..

在组件里添加它的默认属性 .. 添加一个 static defaultProps .. 组件的属性有 customStyle .. 默认是空白 .. 还有 className .. 默认也是空白 .. 还有 icon ，它是要使用的小图标的名字 .. size 是图标大小，默认可以是 24 ... 还有一个 color 属性..

在组件的 render 方法里面，从组件的属性里解构出来一些东西 .. customStyle .. className .. icon .. size .. 还有 color .. 它们都来自 this.props..

下面添加一个 rootStyle .. 它是一个对象 .. 里面添加一个 fontSize .. 图标的大小值要特别处理一下 .. 用一下 Taro.pxTransform .. 给它的参数值 .. 先把 size 的值转换成数字 .. 让它再乘以 2 ..

还有一个 color 样式 .. 值就是组件里的 color 属性里的值 ..

在组件的视图里面用一下 Text 组件 .. 把 View 换成 Text .. 它里面包装的文字是 icon ..

然后在 Text 组件的上面 .. 添加一个 className 属性 .. 属性的值，用一下 classNames 方法 .. 给它一个 className .. 还需要一个 material-icons

在文件的顶部 ... 导入 classNames .. 来自 classnames .

需要的组件是 Text ..

继续再编辑 Text 组件的属性 .. 添加一个 style 属性 .. 属性的值用一下 this.mergeStyle 方法 .. 样式是 rootStyle .. 还有 customStyle .. 保存一下 ..

再到模拟器上预览一下 .. 这里仍然会显示之前的这个小图标 ..

找到使用了 MaterialIcon 这个组件的地方 ... 再修改一下 .. 给它一个 className 属性 .. 添加一个 m-3 ..

icon .. 要显示的小图标修改成 ac_unit .. size 改成 24 .. color 设置成黑色 .. 然后再去预览一下 ..