uni-app 引入彩色图标

uni-app 引入彩色图标

uniapp的图标引入都是单色的，因没有dom引入iconfont.js又会报错，无法引入彩色图标

2 回复

楼主解决了吗？ 我也遇到这个问题

更多关于uni-app 引入彩色图标的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 uni-app 中引入彩色图标通常可以通过以下几种方式实现：使用内嵌的 SVG 图标、引入字体图标库（如 Font Awesome、Iconfont），或者利用图片资源。这里我将展示如何使用内嵌 SVG 和引入 Iconfont 字体图标库来实现彩色图标的引入。

方法一：使用内嵌 SVG 图标

首先，你需要有一个 SVG 图标的文件，或者你可以直接在代码中定义 SVG。以下是一个简单的例子：

<template>
  <view>
    <svg width="50" height="50" viewBox="0 0 24 24" fill="currentColor">
      <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.83-.46-7-3.85-7-7.93 0-4.42 3.58-8 8-8s8 3.58 8 8c0 4.08-3.17 7.47-7 7.93z"/>
      <circle cx="12" cy="12" r="3.5"/>
    </svg>
  </view>
</template>

<style>
svg {
  color: #ff5733; /* 设置图标的颜色 */
}
</style>

方法二：引入 Iconfont 字体图标库

  1. 获取 Iconfont 项目链接：首先，在 Iconfont 上创建一个项目并下载或获取项目链接。

  2. 在项目中引入：在 main.js 或 App.vue 中引入 Iconfont 的 CSS 文件。

// main.js 或 App.vue 的 script 部分
import './static/iconfont/iconfont.css'; // 假设你将 CSS 文件放在 static/iconfont 目录下
  1. 使用图标：在你的组件中使用类名来引用图标，并通过 CSS 设置颜色。
<template>
  <view>
    <i class="iconfont icon-home" style="color: #3498db;"></i>
    <i class="iconfont icon-user" style="color: #2ecc71;"></i>
  </view>
</template>

<style>
/* 你可以在这里定义全局样式，或者直接在模板中通过 style 属性设置颜色 */
</style>

通过上述方法，你可以轻松地在 uni-app 中引入并使用彩色图标。使用 SVG 的方式允许你直接在代码中定义图标的形状和颜色，而引入 Iconfont 则提供了更丰富的图标选择，并可以方便地通过 CSS 控制图标的样式和颜色。选择哪种方式取决于你的具体需求和项目复杂度。

回到顶部