Icon 图标

Scan me!

SVG 图标

引入

  1. import { Icon } from 'mand-mobile'
  2. Vue.component(Icon.name, Icon)

使用指南

组件库内置图标可直接使用,arrow-up/down/left/right, circle-alert/cross/righthollo-pluscrossspinner

其他自定义图标需使用svg-sprite-loader,svg文件名即图标名称

  • 安装依赖
  1. npm install svg-sprite-loader --save-dev
  • webpack配置
  1. const path = require('path')
  2. module.exports = {
  3. module: {
  4. loaders: [
  5. {
  6. test: /\.svg$/i,
  7. loader: 'svg-sprite-loader',
  8. include: [
  9. // 将某个路径下所有svg交给 svg-sprite-loader 插件处理
  10. path.resolve(__dirname, 'src/my-project-svg-folder')
  11. ],
  12. }
  13. ]
  14. }
  15. }
  • 引入图标
  1. <template>
  2. <div>
  3. <md-icon name="hello"></md-icon>
  4. <md-icon name="world"></md-icon>
  5. </div>
  6. </template>
  7. <script>
  8. import 'src/my-project-svg-folder/hello.svg'
  9. import 'src/my-project-svg-folder/world.svg'
  10. import { Icon } from 'mand-mobile'
  11. export default {
  12. name: 'icon-demo',
  13. components: {
  14. [Icon.name]: Icon
  15. }
  16. }
  17. </script>

代码演示

图标

  1. <template>
  2. <div class="md-example-child md-example-child-icon md-example-child-icon-0">
  3. <div class="md-example-item">
  4. <md-icon name="hollow-plus" size="lg"></md-icon>
  5. <p>hollow-plus</p>
  6. </div>
  7. <div class="md-example-item">
  8. <md-icon name="circle-right" size="lg"></md-icon>
  9. <p>circle-right</p>
  10. </div>
  11. <div class="md-example-item">
  12. <md-icon name="circle-cross" size="lg"></md-icon>
  13. <p>circle-cross</p>
  14. </div>
  15. <div class="md-example-item">
  16. <md-icon name="circle-alert" size="lg"></md-icon>
  17. <p>circle-alert</p>
  18. </div>
  19. <div class="md-example-item">
  20. <md-icon name="arrow-up" size="lg"></md-icon>
  21. <p>arrow-up</p>
  22. </div>
  23. <div class="md-example-item">
  24. <md-icon name="arrow-right" size="lg"></md-icon>
  25. <p>arrow-right</p>
  26. </div>
  27. <div class="md-example-item">
  28. <md-icon name="arrow-down" size="lg"></md-icon>
  29. <p>arrow-down</p>
  30. </div>
  31. <div class="md-example-item">
  32. <md-icon name="arrow-left" size="lg"></md-icon>
  33. <p>arrow-left</p>
  34. </div>
  35. <div class="md-example-item">
  36. <md-icon name="cross" size="lg"></md-icon>
  37. <p>cross</p>
  38. </div>
  39. <div class="md-example-item">
  40. <md-icon name="right" size="lg"></md-icon>
  41. <p>right</p>
  42. </div>
  43. <div class="md-example-item">
  44. <md-icon name="spinner" size="lg" style="-webkit-filter:invert(1)"></md-icon>
  45. <p>spinner</p>
  46. </div>
  47. </div>
  48. </template>
  49. <script>
  50. import {Icon} from 'mand-mobile'
  51. export default {
  52. name: 'icon-demo',
  53. components: {
  54. [Icon.name]: Icon,
  55. },
  56. }
  57. </script>
  58.  

颜色

  1. <template>
  2. <div class="md-example-child md-example-child-icon md-example-child-icon-2">
  3. <div class="md-example-item-s">
  4. <md-icon name="circle-right" color="#333"></md-icon>
  5. <p>xs</p>
  6. </div>
  7. <div class="md-example-item-s">
  8. <md-icon name="circle-right" color="orange"></md-icon>
  9. <p>sm</p>
  10. </div>
  11. <div class="md-example-item-s">
  12. <md-icon name="circle-right" color="blue"></md-icon>
  13. <p>md</p>
  14. </div>
  15. <div class="md-example-item-s">
  16. <md-icon name="circle-right" color="purple"></md-icon>
  17. <p>lg</p>
  18. </div>
  19. </div>
  20. </template>
  21. <script>
  22. import {Icon} from 'mand-mobile'
  23. export default {
  24. name: 'icon-demo',
  25. components: {
  26. [Icon.name]: Icon,
  27. },
  28. }
  29. </script>
  30.  

大小

  1. <template>
  2. <div class="md-example-child md-example-child-icon md-example-child-icon-1">
  3. <div class="md-example-item-s">
  4. <md-icon name="circle-right" size="xs"></md-icon>
  5. <p>xs</p>
  6. </div>
  7. <div class="md-example-item-s">
  8. <md-icon name="circle-right" size="sm"></md-icon>
  9. <p>sm</p>
  10. </div>
  11. <div class="md-example-item-s">
  12. <md-icon name="circle-right" size="md"></md-icon>
  13. <p>md</p>
  14. </div>
  15. <div class="md-example-item-s">
  16. <md-icon name="circle-right" size="lg"></md-icon>
  17. <p>lg</p>
  18. </div>
  19. </div>
  20. </template>
  21. <script>
  22. import {Icon} from 'mand-mobile'
  23. export default {
  24. name: 'icon-demo',
  25. components: {
  26. [Icon.name]: Icon,
  27. },
  28. }
  29. </script>
  30.  

API

Icon Props

属性说明类型默认值备注
name图标名称String--
size图标大小Stringmdxs, sm, md, lg
color图标颜色StringcurrentColor该颜色值会作为fill的值被设置在svg图标上