Icon 图标 | JView UI

@jview/icons提供语义化的矢量图标组件，图标素材源于 Feather Icons 开源项目。

图标集合是一个独立的 npm 包，因此你需要安装@jview/icons图标库。

每个图标都是一个单组件，支持按需使用，你完全不用担心项目体积因为引入一个图标库而增大许多。

如果您认为@jview/icons图标库不能满足需求，可以选择@jview/icons-antd，这是 JView UI 官方封装的另一个图标库，图标素材来源于Ant Design，同样支持单组件按需使用。

如果您希望使用 iconfont 图标，我们也同样支持，具体见下方的使用iconfont图标。

安装图标组件包

bash

npm install @jview/icons
// OR
yarn add @jview/icons
// OR
pnpm add @jview/icons

npm install @jview/icons
// OR
yarn add @jview/icons
// OR
pnpm add @jview/icons

使用图标

引入一个图标。

import { ArrowDownLeft } from "@jview/icons"

import { ArrowDownLeft } from "@jview/icons"

模板中使用图标。

html

<ArrowDownLeft />

<ArrowDownLeft />

图标集合

点击图标可复制代码。

Activity

Airplay

AlertCircle

AlertOctagon

AlertTriangle

AlignCenter

AlignJustify

AlignLeft

AlignRight

Anchor

Aperture

使用iconfont图标

如果您是 iconfont.cn 的用户，我们提供了createIconFont方法，可以轻松创建一个IconFont组件，接着指定ico属性即可使用 iconfont 项目中的图标。

展开查看代码

vue

<template>
    <j-space>
        <IconFont ico="layers" />
        <IconFont ico="lock" />
        <IconFont ico="fullscreen-expand" />
    </j-space>
</template>

<script setup>
import { createIconFont } from '@jview/icons'

const IconFont = createIconFont({ scriptUrl: '//at.alicdn.com/t/c/font_3736402_d50r1yq40hw.js', icoPrefix: 'vp-icon-' })
</script>

<template>
    <j-space>
        <IconFont ico="layers" />
        <IconFont ico="lock" />
        <IconFont ico="fullscreen-expand" />
    </j-space>
</template>

<script setup>
import { createIconFont } from '@jview/icons'

const IconFont = createIconFont({ scriptUrl: '//at.alicdn.com/t/c/font_3736402_d50r1yq40hw.js', icoPrefix: 'vp-icon-' })
</script>

属性

参数	说明	类型	默认值	必填
size	图标大小	`number`	无	否
color	图标颜色	`string`	无	否
spin	开启旋转动画	`boolean`	无	否
rotate	设置旋转角度，不能与`spin`同时使用	`number`	无	否
onClick	点击事件回调	`(event: MouseEvent) => void`	无	否

安装图标组件包 ​

使用图标 ​

图标集合 ​

使用iconfont图标 ​

属性 ​

安装图标组件包

使用图标

图标集合

使用iconfont图标

属性