Nightmarish Pawnshop Mystic

    @whalecloud/fishx-pto-iconfont

    1.0.3 • Public • Published

    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

    Install

    npm i @whalecloud/fishx-pto-iconfont

    DownloadsWeekly Downloads

    5

    Version

    1.0.3

    License

    MIT

    Unpacked Size

    1.32 MB

    Total Files

    95

    Last publish

    Collaborators

    • whalecloud-developer