1.0.3 • Published 4 years ago
dog-icon v1.0.3
图标库
易于使用的图标组件
命名规范
名称 | 值 |
---|---|
库全称 | dog-icon |
库简称 | dog |
组件前缀 | dog- |
快速开始
1. 安装
npm i dog-icon
或者
yarn add dog-icon
2. 使用
在检索页面上选择需要使用的图标
复制组件代码
在页面中贴入代码,示例如下:
按需引用(推荐)
<!--在组件中使用-->
<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 | 设定图标是否旋转 |