微信小程序使用阿里巴巴矢量圖


一、symbol

1.搭建環境(在項目根目錄打開cmd窗口)

 npm init -y

 

 

 

這時根目錄會多出一個package.json文件

2.mini-program-iconfont-cli(PS:一種適合小程序的多色解決方案)

npm install mini-program-iconfont-cli --save-dev

 

 

 提示有個高危漏洞,不管它,要管它的話可以執行npm audit fix或npm audit

這時會生成node_modules的文件夾

3.生成配置文件

npx iconfont init

 

 

 

這時根目錄會多出一個iconfont.json文件

4.生成iconfont文件夾

npx iconfont-wechat

 

 

 這時會多出一個 iconfont文件夾,這個是為小程序生成的組件

5.打開iconfont.json配置文件,修改symbol_url的值

 

 復制//at.alicdn.com/t/font_1872838_n9eme2nws4k.js的值放到下面的圖位置

 

 6.組件在全局引用

 

 

"usingComponents": { "iconfont": "./iconfont/iconfont" }

7.終於可以開始用了(name的值是要去掉icon的)

 二、unicode(沒有彩色的,就算有彩色的也會變灰色)

1.下載代碼,解壓

 

2.直接復制iconfont.css的代碼到xxx.wxss

 

 

 3.在頁面引入(在全局引入會比較好,我這里使用單個頁面引入)

 

<view class="iconfont icon-weixin"></view>

原本是彩色的,出來就變成黑色的了

 

 

 

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM