How to change icon color in uniapp

How to change the icon color in uniapp: first introduce iconfont.js into the project; then set the color through the "" method; and finally modify the icon size.

The operating environment of this tutorial: windows7 system, uni-app2.5.1 version, Dell G3 computer.

Recommended (free): uni-app tutorial

Introducing colored icons

1. Introduce iconfont.js

// main.js
import './assets/iconfont.js'

2. Use

<svg class="icon" aria-hidden="true">
  <use xlink:href="#qc-icecream"></use>
</svg>

3. Modify the size

.icon {
  width: 1em; height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

The above is the detailed content of How to change icon color in uniapp. For more information, please follow other related articles on the PHP Chinese website!