Skip to content

Latest commit

 

History

History
90 lines (65 loc) · 3.72 KB

icon.en-US.md

File metadata and controls

90 lines (65 loc) · 3.72 KB
nav group toc demo
Components
title order
General
0
content
cols
2

Icon

Usage

To use the icon component, you need to install the @emooa/icon icon component package

yarn add @emooa/icon --save

This is a brand new way of use, and it should be said that this is the mainstream in the future. This usage is actually a collection of svg, which has the following characteristics:

  • Completely offline use, no need to download font files from CDN, icons will not appear square due to network problems, and no local deployment of font files is required.
  • SVG has better clarity on low-end devices.
  • Support multi-color icons.
  • All icons will be rendered with <svg> tags and inherit all the attribute APIs of <svg>. You can use color and className to set the size of the icon and the color of the monochrome icon. For example:
import { IconApps } from '@emooa/icon';

export default () => (
  <>
    <IconApps color="red" />
  </>
);

Icon List

import IconList from '../../packages/icon/examples/IconList.tsx';

export default () => <IconList lang="en-US" />;

Usage

  • Massive Emooa UI iconfont icons.
  • Supports importing customized iconfont.cn or iconbox icons.
  • Supports adjusting styles through font-size and color like css fonts.

Examples

Basic
Size
Use iconfont.cn
Multiple resources from iconfont.cn

API

Icon

Parameters Definition Type Default value
className Set the style name of the icon string -
style Set the style of the icon, such as fontSize and color CSSProperties -
type Icon name string -
color Color string -
spin Is there a rotation animation? boolean false

Other attributes svg.

Load Icon on iconfont.cn

import { Icon } from '@emooa/ui';

const IconFont = Icon.createFromIconfontCN({
  url: 'xxx',
});

This URL is the URL exported in symbol mode from the project you created or joined on iconfont.cn.

The principle is to create a component that uses the <use> tag to render the icon.

Parameters Definition Type Default value
url iconfont.cn The js address generated by the project online. string string[] -
options Set additional attributes for the svg tag { [key: string]: any } -