IconApron

under developing current version: (vue: 1.0.7)(react: 1.0.4)(vue-next: 1.0.6)(svg: none)

English | 简体中文

Introduction

IconApron gives most useful icons in use of funplus ui. We provide crose-platform components, including react-icons, vue-icons and svg-icons.

Packages

Generate Cross-platform Components

Find packages in packages folder. NPM packages make it painless to import icon components to your project.

Name	Github Link	NPM link
React Icons	React Component	@icon-apron/react
Vue2 Icons	Vue Component for Vue2	@icon-apron/vue
Vue3 Icons	Vue Component for Vue3	@icon-apron/vue-next
SVG Icons	Pure SVG String	@iconapron/svg

website

Here is the website of IconApron. Each icon is from svg with in a 30 x 30 grid. each icon has a default color of black(HEX #000000, RGB rgb(0, 0, 0)), but can set font color as a charactor with css(font-color).

Usage

Icon Apron provided figma link for designers and React/Vue components for developers.

For Designers

Everybody can view our Figma link to view, copy all icons.

For developers

Install dependency via npm or yarn.

Indeed, you should base on your project is using Vue, Vue next or React.

Step.1 Install Dependency

npm install @icon-apron/vue --save # Vue2 projects
npm install @icon-apron/vue-next --save # Vue3 projects
npm install @icon-apron/react --save # React projects

# you can also use yarn instead of npm

Step.2 Import Component library

As a sample, we present a Vue2 import usage.

Vue2 project main.js

import IconApron from '@iconapron/vue'
Vue.use(IconApron)

Vue2 project in component

import { IconApron } from '@iconapron/vue'

export default {
  components: { IconApron }
}

Step.3 Use it in HTML or render function

Vue html

<IconApron name="icon-apron" />

React render function

// ... some codes ...
render () {
  return (
    <div>
      <IconApron name='icon-apron' />
    </div>
  )
}
// ... some codes ...

Change Log

CHANGELOG | 更新日志

Contact Us

Lark Group