Icon 图标
SVG 图标
引入
import { Icon } from 'mand-mobile'
Vue.component(Icon.name, Icon)
使用指南
组件库内置图标可直接使用,arrow-up/down/left/right
, circle-alert/cross/right
,hollo-plus
,cross
,spinner
其他自定义图标需使用svg-sprite-loader,svg文件名即图标名称
- 安装依赖
npm install svg-sprite-loader --save-dev
- webpack配置
const path = require('path')
module.exports = {
module: {
loaders: [
{
test: /\.svg$/i,
loader: 'svg-sprite-loader',
include: [
// 将某个路径下所有svg交给 svg-sprite-loader 插件处理
path.resolve(__dirname, 'src/my-project-svg-folder')
],
}
]
}
}
- 引入图标
<template>
<div>
<md-icon name="hello"></md-icon>
<md-icon name="world"></md-icon>
</div>
</template>
<script>
import 'src/my-project-svg-folder/hello.svg'
import 'src/my-project-svg-folder/world.svg'
import { Icon } from 'mand-mobile'
export default {
name: 'icon-demo',
components: {
[Icon.name]: Icon
}
}
</script>
代码演示
图标
<template>
<div class="md-example-child md-example-child-icon md-example-child-icon-0">
<div class="md-example-item">
<md-icon name="hollow-plus" size="lg"></md-icon>
<p>hollow-plus</p>
</div>
<div class="md-example-item">
<md-icon name="circle-right" size="lg"></md-icon>
<p>circle-right</p>
</div>
<div class="md-example-item">
<md-icon name="circle-cross" size="lg"></md-icon>
<p>circle-cross</p>
</div>
<div class="md-example-item">
<md-icon name="circle-alert" size="lg"></md-icon>
<p>circle-alert</p>
</div>
<div class="md-example-item">
<md-icon name="arrow-up" size="lg"></md-icon>
<p>arrow-up</p>
</div>
<div class="md-example-item">
<md-icon name="arrow-right" size="lg"></md-icon>
<p>arrow-right</p>
</div>
<div class="md-example-item">
<md-icon name="arrow-down" size="lg"></md-icon>
<p>arrow-down</p>
</div>
<div class="md-example-item">
<md-icon name="arrow-left" size="lg"></md-icon>
<p>arrow-left</p>
</div>
<div class="md-example-item">
<md-icon name="cross" size="lg"></md-icon>
<p>cross</p>
</div>
<div class="md-example-item">
<md-icon name="right" size="lg"></md-icon>
<p>right</p>
</div>
<div class="md-example-item">
<md-icon name="spinner" size="lg" style="-webkit-filter:invert(1)"></md-icon>
<p>spinner</p>
</div>
</div>
</template>
<script>
import {Icon} from 'mand-mobile'
export default {
name: 'icon-demo',
components: {
[Icon.name]: Icon,
},
}
</script>
颜色
<template>
<div class="md-example-child md-example-child-icon md-example-child-icon-2">
<div class="md-example-item-s">
<md-icon name="circle-right" color="#333"></md-icon>
<p>xs</p>
</div>
<div class="md-example-item-s">
<md-icon name="circle-right" color="orange"></md-icon>
<p>sm</p>
</div>
<div class="md-example-item-s">
<md-icon name="circle-right" color="blue"></md-icon>
<p>md</p>
</div>
<div class="md-example-item-s">
<md-icon name="circle-right" color="purple"></md-icon>
<p>lg</p>
</div>
</div>
</template>
<script>
import {Icon} from 'mand-mobile'
export default {
name: 'icon-demo',
components: {
[Icon.name]: Icon,
},
}
</script>
大小
<template>
<div class="md-example-child md-example-child-icon md-example-child-icon-1">
<div class="md-example-item-s">
<md-icon name="circle-right" size="xs"></md-icon>
<p>xs</p>
</div>
<div class="md-example-item-s">
<md-icon name="circle-right" size="sm"></md-icon>
<p>sm</p>
</div>
<div class="md-example-item-s">
<md-icon name="circle-right" size="md"></md-icon>
<p>md</p>
</div>
<div class="md-example-item-s">
<md-icon name="circle-right" size="lg"></md-icon>
<p>lg</p>
</div>
</div>
</template>
<script>
import {Icon} from 'mand-mobile'
export default {
name: 'icon-demo',
components: {
[Icon.name]: Icon,
},
}
</script>
API
Icon Props
属性 | 说明 | 类型 | 默认值 | 备注 |
---|---|---|---|---|
name | 图标名称 | String | - | - |
size | 图标大小 | String | md | xs , sm , md , lg |
color | 图标颜色 | String | currentColor | 该颜色值会作为fill 的值被设置在svg 图标上 |