Icons

icon 图标默认是基于 iconfont 的图标，理论上可以传入任何 icon 图标，只要引入了对应的 css

总览

nly-icon 支持渲染任何 font class 的 icon。只需要导入对应的 CSS 就可

nly-icon 组件不包含在 NlyAdminlteVue 中，需要额外引入

import { NlyAdminlteVueIcons } from 'nly-adminlte-vue'
Vue.use(NlyAdminlteVueIcons)

比如使用默认的 nlyfont icon

import 'nly-adminlte-vue/dist/adminlte/icon/iconfont.css'
import { NlyAdminlteVueIcons } from 'nly-adminlte-vue'

使用 Adminlte 3 自带 icon

import 'nly-adminlte-vue/dist/adminlte/fontawesome-free/css/all.css'
import { NlyAdminlteVueIcons } from 'nly-adminlte-vue'

<div>
  <nly-icon icon='far fa-circle text-info' />
  <nly-icon icon='far fa-circle text-warning' />
  <nly-icon icon='far fa-circle text-danger' />
</div>

<div>
  <nly-icon icon='nlyfont nly-icon-breadcrumb-fill text-info' />
  <nly-icon icon='nlyfont nly-icon-breadcrumb-fill text-warning' />
  <nly-icon icon='nlyfont nly-icon-breadcrumb-fill text-danger' />
</div>

<!-- nly-icon.vue -->

注意：

使用 nly-icon 需要额外导入
某些组件中默认会带有 nly-icon 组件, 需要 import 'nly-adminlte-vue/dist/adminlte/icon/iconfont.css' 才会生效

size

nly-icon 大小一般由父元素决定， size 提供一个直接设置大小的入口

<h1><nly-icon icon='nlyfont nly-icon-breadcrumb-fill' /></h1>
<h2><nly-icon icon='nlyfont nly-icon-breadcrumb-fill' /></h2>
<h3><nly-icon icon='nlyfont nly-icon-breadcrumb-fill' /></h3>
<h4><nly-icon icon='nlyfont nly-icon-breadcrumb-fill' /></h4>
<h5><nly-icon icon='nlyfont nly-icon-breadcrumb-fill' /></h5>

<!-- size.name -->
<!-- nly-icon.vue -->

<nly-icon icon='nlyfont nly-icon-breadcrumb-fill' />
<nly-icon icon='nlyfont nly-icon-breadcrumb-fill' size='xs' />
<nly-icon icon='nlyfont nly-icon-breadcrumb-fill' size='sm' />
<nly-icon icon='nlyfont nly-icon-breadcrumb-fill' size='md' />
<nly-icon icon='nlyfont nly-icon-breadcrumb-fill' size='lg' />
<nly-icon icon='nlyfont nly-icon-breadcrumb-fill' size='xl' />

<!-- size.name -->
<!-- nly-icon.vue -->

组件参数

查看源码

`<nly-icon>`

函数式组件（Functional component）

<nly-icon> props 参数

props 参数

props	类型	默认值	描述
`size`	`String`		大小，可选xs，sm，md，lg，xl
`tag`	`String`	`'i'`	标签
`icon`	`String`		图标名称

单个组件导入

你可以从下表给出的导出路径和导出名称导入单个组件包

组件	导出名称	导出路径
`<nly-icon>`	`NlyIcon`	`nly-adminlte-vue`

例子

import { NlyIcon } from 'nly-adminlte-vue'
Vue.component('nly-icon', NlyIcon)

导出作为插件

导出的插件包括上表中列出的组件. 插件同样包含上表中所有组件的简称.

导出名称	导出路径
`IconsPlugin`	`nly-adminlte-vue`

例子

import { IconsPlugin } from 'nly-adminlte-vue'
Vue.use(IconsPlugin)