1.0.3 • Published 5 years ago
dog-icon v1.0.3
图标库
易于使用的图标组件
命名规范
| 名称 | 值 |
|---|---|
| 库全称 | dog-icon |
| 库简称 | dog |
| 组件前缀 | dog- |
快速开始
1. 安装
npm i dog-icon或者
yarn add dog-icon2. 使用
在检索页面上选择需要使用的图标
复制组件代码
在页面中贴入代码,示例如下:
按需引用(推荐)
<!--在组件中使用-->
<DogExcel theme="outline" size="32" fill='#333' />import {DogExcel} from 'dog-icon'
export default{
components:{
DogExcel
}
}全局引用
// 在main.js中进行全局引入
import dogIcon from 'dog-icon'
Vue.use(dogIcon) <!--在组件中使用-->
<DogExcel theme="outline" size="32" fill='#333' />属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| theme | String | outline | 图标的主题,一共四个主题,分别为:outline线条,filled填充,two-tone双色,multi-color多色 |
| size | String | 32px | 图标大小,可配置px,em,rem等类型的尺寸 |
| fill | String or Array | #333 | 图标的颜色,除主题outline设置为字符串类外,其他均为数组 |
| strokeWidth | Number | 2 | 图标线条的宽度 |
| strokeLinecap | String | round | 路径两端的形状,可选值:round (圆角),butt (紧贴),square(直角) |
| strokeLinejoin | String | round | 路径的转角处使用的形状,可选值:round(圆角),miter(锐角),bevel(钝角) |
| spin | Boolean | false | 设定图标是否旋转 |