美文网首页React Native实践
React进阶（十）实战演练之Icon组件

React进阶（十）实战演练之Icon组件

作者: 这波能反杀 | 来源:发表于2018-10-24 23:59 被阅读655次

在实际应用中，图标的使用无处不在，随意截个图，小到简书的编译页面，大到chrome浏览器的任务栏等，都有大量的图标需要处理，而如果我们自己的应用里也需要使用代表各种含义的图标时，我们应该怎么处理呢？是每一个图标都引入一张图片来做吗？

当然不是 ~。

image.png

利用react，我将试图创建一个Icon组件，我们可以在使用时，控制图标的颜色，大小，旋转，图标类型等。大概如下：

<Icon color="red" size="small" type="skip" />
<Icon color="#FFF" size="small" type="loading" />

那么我们应该怎么弄呢？

一、构建工具集成sass

我通常更喜欢使用预编译工具sass来代替css，如果读者朋友们还没有了解过它，可以花10分钟时间搜索学习，非常的简单。

首先下载sass-loader, node-sass

> yarn add sass-loader node-sass

然后修改webpack配置如下：

{
        test: /\.s[ac]ss$/,
        include: paths.appSrc,
        loaders: ["style-loader", "css-loader", "sass-loader"]
      },

重启项目即可生效。

二、字体图标

最初见到字体图标的应用，还是在淘宝网站上。神奇的发现有的图标居然可以像字体一样，随意的给它设置颜色大小等属性。而到了现在，字体图标早已不是什么黑科技了，它几乎被普及到了所有网站。

在css3中，有一个语法可以自定义字体@font-face。而这些字体库如果是由图标组成，那么我们就可以创建字体图标了。字体图标与文字具有相同的特性，我们可以把图标当成字体一样处理。例如修改它的font-size，color等。对应的css语法如下:

@font-face {
    font-family: 'custom name',   /* 自定义字体名字 */
    src: url('./fonts/custom.eot')  /* 下载到本地的字体库 */
}

通常情况下，字体库中，每一个图标，都会对应一个唯一的标识码。现在我们要通过字体图标网站iconfont收集一个自己项目中会涉及到的图标。然后组成一个图标库。

image.png

点击第一个购物车图标，即可将图标收集。按需收集一些图标，统一添加到一个项目中。

image.png

我们可以看到，图标安静的躺在我们的项目中。

image.png

可以使用线上图标库。点击查看在线链接并且生成代码即可。我的项目生成的在线代码如下：

@font-face {
  font-family: 'iconfont';  /* project id 496908 */
  src: url('//at.alicdn.com/t/font_496908_9n2jkt8rov1xxbt9.eot');
  src: url('//at.alicdn.com/t/font_496908_9n2jkt8rov1xxbt9.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_496908_9n2jkt8rov1xxbt9.woff') format('woff'),
  url('//at.alicdn.com/t/font_496908_9n2jkt8rov1xxbt9.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_496908_9n2jkt8rov1xxbt9.svg#iconfont') format('svg');
}

将这段代码贴到我们的css文件中，就已经自定义了一个font-family为iconfont的字体图标。我们也可以将字体图标库下载下来，把url中的路径都修改为对应的字体库文件就行。

可以看到，每一个图标除了有一个对应的名字之外，还有一个唯一的unicode码。&#x表示他们后面跟的是16进制数字。假设我们期望在html中放入一个代表图标的标签。

<i class="icon-loading" />

那么，只要它对应的css这样写，就可以在页面中显示出字体库中的图标。

.icon-loading {
  font-family: "iconfont";
  color: red;
  font-size: 20px;
}
.icon-loading:before {
  content: "\e602";
}

content的值是一个斜杠加上图标对应的十六进制数字。运行之后我们就能在页面中看到一个红色的斜体loading图标。

对应的scss写法为：

/* 对应的scss写法为 */
.icon-loading {
  font-family: "iconfont";
  color: red;
  font-size: 20px;
  &:before {
    content: "\e602";
  }
}

是不是感觉又学到知识了，求赞求赞 ^ ^
防伪标识 专业求赞

三、字体图标组件

很显然图标组件的封装不会涉及到太过于复杂的JS逻辑处理，更多的是对外部状态props的判断与处理。基础元素可以指定一个i标签。图标通过before/after伪类中的content显示。实现方法我们将每一个图标都对应写一个class，然后根据传入的type类型，动态的修改对应的class即可。

例如

/* loading */
.icon-loading {
    /* ... */
    &:before { content: '\e602' }
}

.icon-refresh {
    /* ... */
    &:before { content: '\e6aa' }
}

js的逻辑的处理主要是根据传入的参数，判断有哪些class名应该存在。

先思考一下组件封装好后，我们会遇到哪些情况。

第一个基本情况，就是简单的传入type，得到对应的图标显示。

<Icon type="close" />

第二种情况，是组件本身需要设置一些样式，因此可能会有通过添加class的方式定义css样式。

<Icon className="close" type="close" />

第三种情况，则是要直接修改图标的样式，例如设置颜色，字体大小等。

// 第一种可以直接传入对应的属性
<Icon type="close" color="red" />

// 另外一种是利用jsx支持的style语法，传入css样式。
const style = {
    color: 'red',
    fontSize: '20px'
}
<Icon type="close" style={style} />

第四种情况是我们要考虑特殊的类型，例如loading图标需要一直旋转。例如refresh刷新图标，点击时才旋转，刷新完成就停止旋转。因此我们要专门针对这种情况做特殊处理。添加一个控制选择的属性。

// 通过对spin的修改，来控制图标是否旋转
<Icon type="refresh" spin="false" />

其余的我们可能在实践中还会添加新的需求，到时候再根据需求做改进即可。

OK，带着这些基础知识和需求，我们开始动手来完成我们的第一个正式的React组件。

在src目录下，创建一个专门用来存放组件的文件夹，components。然后在components目录下创建Icon目录。并分别创建index.jsx与style.scss。我们将字体图标下载下来，存放于Icon目录的fonts目录中。

最终的文件结构大致如下：

+ Icon
  + fonts
  - index.jsx
  - style.scss

通过上面的分析我们知道，基础元素的class可能会涉及到很多个，如果通过if/else来判断的话，可能我们的代码可读性会非常的低。因此这里我们借助一个专门处理class名的工具方法来完成逻辑的判断。这个工具库叫做classnames。

我们先安装这个库，然后重启项目。

> yarn add classnames

该工具方法的使用比较简单，它的目的在于拼接class名。

import classnames from 'classnames';

// 拼接所有参数
classnames('foo', 'bar');  // 'foo bar'

// 拼接值为true的参数
classnames({
    foo: true,
    bar: false
})  //  'foo'

// 也可以比较随意的混合使用
classnames('foo', {
    bar: true,
    tag: true,
    mm: false
}) // 'foo bar tag'

更具体的用法可以查看npm中的文档

现在我们先来实现index.jsx中的代码编写。

首先引入必要的模块。

import React from 'react';
import classnames from 'classnames';
import './style.scss';

然后给可能会接收的props设定一个默认值。

const defaultProps = {
    type: '',
    spin: false
}

定义组件，因为仅仅只是一个UI展示，所以该组件是一个无状态组件，我们用function的方式来定义即可。

上一章主要介绍的是有状态的创建方式，没有涉及到这种方式，不过可以通过该例子直接掌握，不再特别描述

export default (props = defaultProps) => {
    // 依次从props中取出可能会出现的值，此处的other表示其余所有剩余的属性，这是ES6的语法
    const { type, className, spin, color, style, ...other } = props;

    // 利用classnames方法计算出最终的classname字符串。
    const cls = classnames({
        [`${preFix}-icon`]: true,
        [`${preFix}-icon-spin`]: !!spin || type === 'loading',
        [`${preFix}-icon-${type}`]: true
    }, className);

    // es6的展开运算符与变量属性同名简写语法，得到最终的style样式
    const _style = { ...style, color }

    return (
        <i className={cls} {...other} style={_style}></i>
    )
}

完整代码为

import React from 'react';
import classnames from 'classnames';
import './style.scss';

const defaultProps = {
    type: '',
  spin: false // 是否旋转
}

const preFix = 'advance';

export default (props = defaultProps) => {
    // 依次从props中取出可能会出现的值，此处的other表示其余所有剩余的属性，这是ES6的语法
    const { type, className, spin, color, style, ...other } = props;

    // 利用classnames方法计算出最终的classname字符串。
    const cls = classnames({
        [`${preFix}-icon`]: true,
        [`${preFix}-icon-spin`]: !!spin || type === 'loading',
        [`${preFix}-icon-${type}`]: true
    }, className);

    // es6的展开运算符与变量属性同名简写语法，得到最终的style样式
    const _style = { ...style, color }

    return (
        <i className={cls} {...other} style={_style}></i>
    )
}

因为涉及到比较多的ES6语法的使用，如果还有ES6语法掌握不够熟练的同学，可以一遍学习，一遍巩固ES6的使用。前几个例子，我会尽量注释，等多几个例子之后，我就可能不会注释太多，相信到时候大家对ES6的掌握也比较熟练了。

接来下是css的实现。

@mixin fontface ($font_name) {
    font-family: $font_name;
    src: url('./fonts/#{$font_name}.eot?t=1498726624880'); /* IE9*/
    src: url('./fonts/#{$font_name}.eot?t=1498726624880#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('./fonts/#{$font_name}.woff?t=1498726624880') format('woff'), /* chrome, firefox */
    url('./fonts/#{$font_name}.ttf?t=1498726624880') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
    url('./fonts/#{$font_name}.svg?t=1498726624880#iconfont') format('svg'); /* iOS 4.1- */
}

@font-face {
    @include fontface('iconfont');
}

.advance {
    &-icon {
        font-family: 'iconfont'!important;
        font-style: normal;
        font-size:inhert;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;

        &-anli:before { content: "\e641"; } // 案例
        &-jianshu:before { content: "\e613"; }
        &-list:before { content: "\e63b"; }
        &-github:before { content: "\e60a"; }
        &-case:before { content: "\e627"; }  // case
        &-segmentfault:before { content: "\e601"; } // segmentfault
        &-xiangqing:before { content: "\e628"; }  // 详情
        &-juejin:before { content: "\e602"; }
        &-react:before { content: "\e60b"; }
        &-profile:before { content: "\e600"; }
        &-logo:before { content: "\e608"; }  // logo
        &-css:before { content: "\e63a"}
        &-js:before { content: "\e87b"}
        &-dom:before { content: "\e60f"}
        &-star:before { content: "\e733"}
    }
}

@keyframes rotate {
    from { transform: rotate(0) };
    to { transform: rotate(360deg)};
}

OK，一个简单却非常nice的Icon组件就这样完成了。

是不是感觉又学到知识了，求赞求赞 ^ ^
防伪标识 专业求赞

我相信对于刚接触React的朋友来说，特别是对ES6运用不太熟练的朋友，这个例子虽然简单，却有许多值得总结的经验，建议大家动手实践，细细回味。淡化对React的紧张感与重视感，从大局去体会React的魅力，这比React本身的知识点更为重要。

Icon组件主要是对于props的运用，我们的下一个任务是要封装一个Button组件，大家可以思考一下我们可以如何利用前面学到的知识点实现出来呢？

参照 antd的button组件效果
https://ant.design/components/button-cn/

相关文章

网友评论

  • 多多__指教:.jsx的代码看懂了，但是scss没看懂，url里面的相对路径t=1498726624880是什么，还有下载的icon有格式要求吗
    多多__指教:已解决，webpack配置有问题。
    多多__指教:@示十
    @mixin fontface($font_name){
    font-family: $font_name;
    src: url('./fonts/#{$font_name}.eot?t=1541581095651'); /* IE9*/
    src: url('./fonts/#{$font_name}.eot?t=1541581095651#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('./fonts/#{$font_name}.woff?t=1541581095651') format('woff'),
    url('./fonts/#{$font_name}.ttf?t=1541581095651') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
    url('./fonts/#{$font_name}.svg?t=1541581095651#iconfont') format('svg'); /* iOS 4.1- */
    }
    下载好了，但是效果还是没出来，求源码
    示十:下载fongclass的就可以

本文标题：React进阶（十）实战演练之Icon组件

本文链接：https://www.haomeiwen.com/subject/nmpftqtx.html

延伸阅读

深度阅读

  • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

栏目导航

热点阅读

React Native实践

关于我们|服务条款|联系我们|React进阶（十）实战演练之Icon组件|投稿指南|网站地图|RSS订阅|排版工具|手机版

提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！