图标类 icon

# 图标类 icon

# 默认样式

要使用图标类，需要先引入。

@import "~@modyqyw/mp-scss";
// @import "~@modyqyw/mp-scss/components";
// @import "~@modyqyw/mp-scss/components/icon";

1
2
3

在需要图标的地方可以使用 .icon。

<view class="container">
  <button class="btn">
    <image class="icon" src="../assets/image.png"></image>
    text
  </button>
</view>

1
2
3
4
5
6

# 尺寸

内置四个尺寸类。

<view class="container">
  <button class="btn is-xs">
    <image class="icon is-xs mr-4" src="../assets/image.png"></image>
    text
  </button>
  <button class="btn is-sm">
    <image class="icon is-sm mr-4" src="../assets/image.png"></image>
    text
  </button>
  <button class="btn">
    <image class="icon mr-4" src="../assets/image.png"></image>
    text
  </button>
  <button class="btn is-lg">
    <image class="icon is-lg mr-4" src="../assets/image.png"></image>
    text
  </button>
  <button class="btn is-xl">
    <image class="icon is-xl mr-4" src="../assets/image.png"></image>
    text
  </button>
</view>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

# 变量

变量名	变量值
`icon--font-size-base`	`$font-size-base`
`$icon--font-size-base--xs`	`$font-size-base`
`$icon--font-size-base--sm`	`$font-size-base`
`$icon--font-size-base--lg`	`$font-size-base + $font-size-diff`
`$icon--font-size-base--xl`	`$font-size-base + $font-size-diff`
`$icon--line-height`	`$line-height-default`
`$icon--line-height--xs`	`$line-height-default`
`$icon--line-height--sm`	`$line-height-default`
`$icon--line-height--lg`	`$line-height-default`
`$icon--line-height--xl`	`$line-height-default`

# FAQ

# 有实际可供使用的图标吗

库内没有内置图标，这并非核心目标。如果有需要，请自行引入。

# 图标过大或过小

我们假定你使用的图标都带有一定的空白边距。如果没有边距，请自行用一个容器包裹并添加内边距，或者更换图标，或者调整图标的 line-height 为 1。

分割线类 divider 输入框 input