uni-app 导入 icon 彩色和黑白色

2021-07-26 本文已影响0人南土酱

不得不说，日了狗了。现在前端更新得很快，去年20年找到的一些博客解决的办法都不管用了。自己摸索了几小时才成功。现在马上记录一下，不对之处留言提出。不懂的留言提问即可。

本文章是针对导入icon失败这个问题提供的解决方法。其他问题请移步别的博客

第一步:

去al 爸爸那里注册，下载自己喜欢的 icon。并且添加到自己的项目里
iconfont-阿里巴巴矢量图标库
1.png

然后点击图中的在线连接。下载出自己的 font-face 。还有本地代码也要下载。 
然后将iconfont.css 里边的 @font-face替换掉
(在每个 //at.alicdn 前边添加 https:)  
具体的这里不说，别的博客很多

第二步:

把下载的所有文件放到自己的 uni-app common文件夹里边
然后全局安装依赖包，确保能实现彩色的依赖包，不然你的图标就是黑白色的而已。命令如下:

cmd 运行此命令 npm install -g iconfont-tools

找到安装的 iconfont-tools （一般在自己的 node 的目录下）

path.png
把阿里下载的 icon 里边的 iconfont.js 文件复制到这个iconfont-tools 文件夹下

3.png
4.png
cmd 进入当前 iconfont-tools 文件夹下，执行 iconfont-tools 命令

image.png

该命令会自己去找 iconfont.js 文件，找不到会报错。如果成功就有文件夹出来

5.png

第三步

然后把里边的 iconfont-weapp-icon.css 文件也拿出来放到 uni-app common 目录下，具体位置自己定。一般都是和icon一起的。

6-this is my folder.png
在App.vue 里导入这两个文件（不需要在 main.js里导入）

@import url("common/icon/iconfont.css"); （用于黑白色使用）
@import url("common/icon/iconfont-weapp-icon.css"); (用于彩色使用)
具体是黑白色还是彩色看项目。打包的时候注释掉其中一个即可，这里是因为演示效果才两个都导入
然后调整一下字体大小。
在 iconfont.css 里边把font-size 改一下。用于调整icon图标大小

.iconfont {
  font-family: "iconfont" !important;
  font-size:  110rpx;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
在App.vue 的 style 里边加上

.t-icon{
        width: 120rpx !important;
        height: 120rpx !important;
    }

随便找个页面放入自己的 icon

  <view>
        <icon class="iconfont icon-XXX"></icon>
</view>
<view >
        <view class="t-icon t-icon-XXX"></view>
</view>
这里使用两种 标签 icon 和 view 都能成功 。虽然 icon 也能显示，但是 uni-app 在浏览器 
console 那会一直报错。看着就很不爽，这里仅仅是演示。

另外:
彩色图标 记得一定要使用 t-icon 和 t-icon-XXX ，不然无法显示
结果如图。大小经过调整也好看了
最后如果有别的问题，欢迎留言提问