icons

The premium icon font for @fish-x Component Library. 查看已有图标fish-x iconfont

添加 icon

可以到 iconfont下载相应图标svg文件, 放到icon目录中即可

HTML Example

You need link CSS

<link rel="stylesheet" type="text/css" href="node_modules/fonts/fishx-icon.css">

Used in Less:

@import "~@whalecloud/fishx-iconfont/fonts/fishx-icon.css";

Used in JS:

import '@whalecloud/fishx-iconfont/fonts/fishx-icon.css';
// or
import '@whalecloud/fishx-iconfont/fonts/fishx-icon.less';

note: It has a fishx-icon- prefix.

<i class="fishx-icon-apple"></i>

Or use the Unicode, You can use Unicode website to easily find the Unicode icon you want to use.

<style>
.iconfont{
  font-family: "fishx-icon" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
}
</style>
<span class="iconfont">&#59907;</span>

<link rel="stylesheet" type="text/css" href="https://unpkg.com/@whalecloud/fishx-iconfont/fonts/fishx-icon.css">
<span class="fishx-icon-adobe"></span>

In Webpack

{
  test: /fishx-icon\.(eot|ttf|svg)$/,
  use: [
    {
      loader: require.resolve('url-loader'),
      options: { limit: 8192 }
    },
    {
      loader: require.resolve('file-loader'),
      options: {
        name: 'static/fonts/[name].[hash:8].[ext]',
      }
    }
  ]
},

React

Create an Icon component.

import React from 'react';
import svgPaths from '@whalecloud/fishx-iconfont/fonts/fishx-icon.json';

export default class Icon extends React.PureComponent {
    render() {
        const { type, color, style, className, onClick } = this.props;
        const _svg = svgPaths[type];
        if (_svg == null || type == null || typeof type === "boolean") {
            return null;
        }
        const { viewBox = "0 0 20 20", path } = _svg;
        return (
            <svg
                fill={color}
                className={className}
                viewBox={viewBox}
                style={style}
                onClick={onClick}
            >
                <path
                    d={path}
                    fillRule="evenodd" />
            </svg>
        );
    }
}

Use the Icon component:

const demo = () => {
  return (
    <Icon type="heart-on" style={{ width: 70, height:70}}  color= '#297CFF' />
  )
}

Development

Run the npm install to install the dependencies after cloning the project and you'll be able to:

To build *.svg *.ttf *.woff *.eot files

npm run font