微信小程序:圖片轉icon

svg方式

通過svg圖片的方式也能實現自定義icon。但是相比第一種方式,svg圖片可以修改顏色,并且縮放的失真率也比較低。不過小程序wxss并不支持加載本地的svg圖片。我們可以通過在線(https://www.sojson.com/image2base64.html)svg轉base64的方式在wxss中加載svg圖片。
實現代碼如下

<icon class="close-icon"></icon>
.close-icon {width: 20rpx;height: 20rpx;background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODAwIiBoZWlnaHQ9IjYwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CgogPGc+CiAgPHRpdGxlPkxheWVyIDE8L3RpdGxlPgogIDxpbWFnZSB4bGluazpocmVmPSJkYXRhOmltYWdlL3BuZztiYXNlNjQsaVZCT1J3MEtHZ29BQUFBTlNVaEVVZ0FBQUJnQUFBQVhDQVlBQUFGbUpyKzdBQUFBQVhOU1IwSUFyczRjNlFBQUFlTkpSRUZVU0EyZFZidFNBa0VROUNnQ0k2SE1JRk1qQXZnRjhEUHdGK1FiTU5CZkl2WkJGWmtQL3NBcXRFeElqTVNFczN0dis1aGI5KzdFcVJwbnBydG4yTnZkTzVNRFdKcW1TNFFXa3piY1dlS1psTEZvWHRGaFRPQmIwSlNmT1JtQUdSbVp3RzhQZEFpRTVGd0FvK3Z3cWtzZis4Q2J6S1ByU21BTktOWlV3QzdnYjB5QVRibEVONU1xRDJhMUxaalQzS2dzcmZpTGlZVWw4eWVzL1dvRnViV0NTSDdpbWtCb3A2UVoyMmtDRlhWb2F3R0lLelVnUHpZNDA2azROaFlPS2hEdWppSHZRQUxSQk03NzRnejVBUDRLZDhjalhHVFRrMzBScUpmd2llcENCRkZsYzRrYlNtcmlaNEhINk5PcThlQjRsVE5EY1JXSVY2aDU2Y2NCenExdmMyY0twa0dNSU1LbVRkMHozTnNCTHNlVWFlRW5jTG9TQWVmeVpObVNTQUw1KzBPYmFab1VpelBwNnA1QnVpTWxlY1JZWFkyQlFHRGxWOE9JZWw1b2wvYUY0aG8rOU02Y21EVU83MmxPYVlUb3lYYnRtVCtHZzJON3RBbEZlOVRsdlZncFA5L1BlNjQ0SnVlTVZyNG9GSGN4bGNGNCtmTExxRVppY0hzeFRVdWUzdHAvSXVvTll4Y2Y1bzhRWkkweFhZVDNHT2V4bEdmd1VDRWdOYXJnaHhVY3FkMjdpdFh3REY3eWh5c20zQXArQ1RyZW1aZHREOCtnWGZyRElCZncvOW9pSEJ5N3BvZWhhSSs2dmhkTGo3M0pHK0EzOEJIODNPZkVyRVhmNUI4UGVEazExamxtVkFBQUFBQkpSVTVFcmtKZ2dnPT0iIHhsaW5rOmhyZWY9ImRhdGE6aW1hZ2UvcG5nO2Jhc2U2NCxpVkJPUncwS0dnb0FBQUFOU1VoRVVnQUFBQmdBQUFBWENBWUFBQUZtSnIrN0FBQUFBWE5TUjBJQXJzNGM2UUFBQWVOSlJFRlVTQTJkVmJ0U0FrRVE5Q2dDSTZITUlGTWpBdmdGOERQd0YrUWJNTkJmSXZaQkZaa1Avc0FxdEV4SWpNU0VzM3R2KzVoYjkrN0VxUnBucHJ0bjJOdmRPNU1EV0pxbVM0UVdremJjV2VLWmxMRm9YdEZoVE9CYjBKU2ZPUm1BR1JtWndHOFBkQWlFNUZ3QW8rdndxa3NmKzhDYnpLUHJTbUFOS05aVXdDN2diMHlBVGJsRU41TXFEMmExTFpqVDNLZ3NyZmlMaVlVbDh5ZXMvV29GdWJXQ1NIN2lta0JvcDZRWjIya0NGWFZvYXdHSUt6VWdQelk0MDZrNE5oWU9LaER1amlIdlFBTFJCTTc3NGd6NUFQNEtkOGNqWEdUVGszMFJxSmZ3aWVwQ0JGRmxjNGtiU21yaVo0SEg2Tk9xOGVCNGxUTkRjUldJVjZoNTZjY0J6cTF2YzJjS3BrR01JTUttVGQwejNOc0JMc2VVYWVFbmNMb1NBZWZ5Wk5tU1NBTDUrME9iYVpvVWl6UHA2cDVCdWlNbGVjUllYWTJCUUdEbFY4T0llbDVvbC9hRjRobys5TTZjbURVTzcybE9hWVRveVhidG1UK0dnMk43dEFsRmU5VGx2VmdwUDkvUGU2NDRKdWVNVnI0b0ZIY3hsY0Y0K2ZMTHFFWmljSHN4VFV1ZTN0cC9JdW9OWXhjZjVvOFFaSTB4WFlUM0dPZXhsR2Z3VUNFZ05hcmdoeFVjcWQyN2l0WHdERjd5aHlzbTNBcCtDVHJlbVpkdEQ4K2dYZnJESUJmdy85b2lIQnk3cG9laGFJKzZ2aGRMajczSkcrQTM4Qkg4M09mRXJFWGY1QjhQZURrMTFqbG1WQUFBQUFCSlJVNUVya0pnZ2c9PSIgaWQ9InN2Z18xIiBoZWlnaHQ9IjIzIiB3aWR0aD0iMjQiIHk9IjI4OC41IiB4PSIzODgiLz4KIDwvZz4KPC9zdmc+');background-position: unset;background-repeat: no-repeat;background-position: center;background-size: contain;
}

字體文件方式

阿里巴巴矢量圖標庫(iconfont.cn)

css方式

小程序wxss原生支持css3。所以可以通過css3方式實現自己想要的自定義icon。
1、僅用css代碼便可以繪制一些基礎的圖形icon

<view class="icon"></view>
.icon {display: inline-block;width: 18rpx;height: 4rpx;background-color: red;transform: rotate(45deg);
}.icon::after {content: "";display: block;width: 18rpx;height: 4rpx;background-color: red;transform: rotate(-90deg);
}

2、轉base64方法


<icon class="close-equipment "></icon>.icon-equipment {width: 72rpx;height: 72rpx;background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAABHNCSVQICAgIfAhkiAAAAZFJREFUWIXtmD1OwzAUgL9E3bp05xL2wFoxM3EFR2LNGThD10ruEWBirroy2Dchi2cYWkemJPgRojRI/ZZW8fPLF/88RykAQgj3wCNwB6yYlgbYA9vlcvm6OMk8AbcTi0RWwANwE0KgCCE8ny7MgZcihPDO9NPUR1MyHxmAVXlpg3OuQjlmJ7SQBnrvqet60E2MMRhjRLHiEbLWDpIBcM6JY8VC3vtBMr/tK56yFKXU6CIRkVCa2BiD1roVi23xf3rNOcdut2tzSB5ENGXpGtBaY63FWtsu9Hjjuq7x3rftfTl+QjRCaTLnHFVV4ZxDKfVlxCKxfQhFCOEjFxSfPKKU+ibRRZyu2Gez2YwjtF6vs4kkHA6HbEx2Df1luw/JNenRIVlXWaGhi3Mo/09oTNJd14eoDkm2qwTJAZ0VipU3PRa6jolIX0xXbBeiKdNat8VQKUVVVe3vObEt7dNVzfvIFkbv/agLO/eiJqrUUzK7d+qrUI5ZCjWXlkhoSo4fi+bCvgS2wNulTTg6bAuY1ye9TyqGy6ncAsCCAAAAAElFTkSuQmCC');background-position: unset;background-repeat: no-repeat;background-position: center;background-size: contain;
}

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/diannao/41057.shtml
繁體地址,請注明出處:http://hk.pswp.cn/diannao/41057.shtml
英文地址,請注明出處:http://en.pswp.cn/diannao/41057.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

Java中的線程調度與性能優化技巧

Java中的線程調度與性能優化技巧 大家好&#xff0c;我是免費搭建查券返利機器人省錢賺傭金就用微賺淘客系統3.0的小編&#xff0c;也是冬天不穿秋褲&#xff0c;天冷也要風度的程序猿&#xff01; 1. 引言 在Java應用程序中&#xff0c;線程調度和性能優化是提升系統響應速…

3D技術賦能電商行業:“人-貨-場”視角下的新變革!

在當今數字化時代&#xff0c;3D技術正以前所未有的方式賦能電商行業&#xff0c;在提升用戶體驗&#xff0c;優化商品展示&#xff0c;以及打造沉浸式的購。物場景上&#xff0c;重塑了電商行業的面貌&#xff0c;深刻改變著消費者的購物體驗和商家的營銷策略。 51建模網作為專…

Eclipse 菜單:深入解析與高效使用技巧

Eclipse 菜單:深入解析與高效使用技巧 Eclipse 是一款廣泛使用的集成開發環境(IDE),它為Java、C++、PHP等編程語言提供了一個強大的開發平臺。Eclipse 的菜單是其用戶界面的一部分,提供了豐富的功能和選項,以幫助開發者更高效地工作。本文將深入解析 Eclipse 的菜單系統…

視圖庫對接系列(GA-T 1400)九、視圖庫對接系列(本級)機動車數據推送

背景 在上幾章中,我們已經可以將視圖庫的平臺寫到我們的數據庫中了。 換句話說就已經接入我們的平臺了,這幾期的話,我們就對接設備, 將設備的數據接入到我們平臺來。 機動車數據推送 接入機動車數據推送相對比較簡單,我們只需要實現對應的接口就ok了。 具體如圖: 有增…

RRStudio 下載及安裝(詳盡版)

R語言來自S語言&#xff0c;是S語言的一個變種。S語言、C語言、Unix系統都是貝爾實驗室的研究成果。R 語言是一種解釋型的面向數學理論研究工作者的語言&#xff0c;主要用于統計分析、繪圖、數據挖掘。 R 語言自由軟件&#xff0c;免費、開放源代碼&#xff0c;支持各個主要計…

Emacs有什么優點,用Emacs寫程序真的比IDE更方便嗎?

Emacs 是一個功能強大的文本編輯器&#xff0c;它在開發者和程序員中非常受歡迎&#xff0c;主要優點包括&#xff1a; 可定制性&#xff1a;Emacs 允許用戶通過 Lisp 編程語言來自定義編輯器的行為和界面&#xff0c;幾乎可以修改任何方面。擴展性&#xff1a;擁有大量的擴展…

TypeScript 如何快速獲取函數的返回類型

ReturnType 是 TypeScript 的一個內置工具類型&#xff0c;用于獲取一個函數的返回類型。下面是一個使用 ReturnType 的示例: function add(a: number, b: number): number {return a b; }type AddReturnType ReturnType<typeof add>; // AddReturnType 是 number 類型…

C++:類型轉換

目錄 一、C語言中的類型轉換 二、為什么C要新的轉換格式 三、 C強制類型轉換 1.static_cast 2.reinterpret_cast 3.const_cast 4.dynamic_cast 一、C語言中的類型轉換 在C語言中&#xff0c;如果賦值運算符左右兩側類型不同&#xff0c;或者形參與實參類型不匹配&…

【高階數據結構】B-數、B+樹、B*樹的原理

文章目錄 B樹的概念及其特點解析B樹的基本操作插入數據插入數據模擬 分析分裂如何維護平衡性分析B樹的性能 B樹和B*樹B樹B樹的分裂B樹的優勢 B*B*樹的分裂 總結 B樹的概念及其特點 B樹是一顆多叉的平衡搜索樹&#xff0c;廣泛應用于數據庫和 文件系統中&#xff0c;以保持數據…

等保2.0的具體技術要求有哪些重點?

在數字化浪潮洶涌澎湃的當下&#xff0c;網絡安全猶如一座守護智慧之城的巍峨城墻&#xff0c;不可或缺。等級保護制度&#xff08;等保&#xff09;作為我國網絡安全戰略的基石&#xff0c;歷經歲月沉淀&#xff0c;已演進至2.0時代&#xff0c;即《網絡安全等級保護基本要求》…

算法思想總結:優先級隊列

一、最后一塊石頭的重量 . - 力扣&#xff08;LeetCode&#xff09; 我們每次都要快速找到前兩個最大的石頭進行抵消&#xff0c;這個時候用優先級隊列&#xff08;建大堆&#xff09;,不斷取堆頂元素是最好的&#xff01;每次刪除堆頂元素后&#xff0c;可以自動調整&#xf…

CentOS 7配置阿里云鏡像源及其加速

備份原yum源的配置&#xff1a;mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS-Base.repo.backup 下載Centos-7.repo文件curl -o /etc/yum.repos.d/CentOS-Base.repo http://mirrors.aliyun.com/repo/Centos-7.repo 清除及生成緩存 # 清除yum緩存 yum clean …

HarmonyOS - 通過.p7b文件獲取fingerprint

1、查詢工程所對應的 .p7b 文件 通常新工程運行按照需要通過 DevEco Studio 的 Project Structure 勾選 Automatically generate signature 自動生成簽名文件&#xff0c;自動生成的 .p7b 文件通常默認在系統用戶目錄下. 如&#xff1a;C:/Users/zhangsan/.ohos/config/default…

【Thread】python Thread Timer使用示例

import threading import time# 定義一個函數&#xff0c;它接受可變數量的字符串參數 def print_message(*messages):for message in messages:print(message)# 定義一個函數&#xff0c;它作為定時器線程的回調函數 def timer_thread(wait_time, *args):print(f"等待 {w…

JavaSE面試題(二)

目錄 一.為什么會有Java內存模型&#xff1f; 二.什么樣的情況下finally不會執行 三.鉤子是什么&#xff1f; 四.編譯時期的多態性和運行時期的多態性 五.談談反射機制 六.Java管道 本專欄全是博主自己收集的面試題&#xff0c;僅可參考&#xff0c;不能相信面試官就出這…

TCP報文校驗和(checksum)計算

一. 原理 將TCP相關內容&#xff08;TCP偽頭部TCP頭部TCP內容&#xff09;轉換成16比特的字符&#xff0c;然后進行累加&#xff0c;最后結果進行取反。TCP偽頭部是固定的&#xff0c;下文有相關代碼展示。 二. 源碼 源碼 #include <stdio.h> #include <stdlib.h&…

3D雞哥又上開源項目!單圖即可生成,在線可玩

大家好&#xff0c;今天和大家分享幾篇最新的工作 1、Unique3D Unique3D從單視圖圖像高效生成高質量3D網格&#xff0c;具有SOTA水平的保真度和強大的通用性。 如下圖所示 Unique3D 在 30 秒內從單視圖野生圖像生成高保真且多樣化的紋理網格。 例如屬于一張雞哥的打球寫真照 等…

js 遞歸調用 相同對象--數組遞歸調用

<div class="save-cl"> <a-button @click="saveCl" >保存為常用策略</a-button> </div> saveCl(){ console.log(this.form.filterList[0],--------常用策略)// 此對象為上圖對象 console.log(this.allElementsHaveValue(thi…

Windows的管理工具

任務計劃程序&#xff1a;這是一個用來安排任務自動運行的工具。你可以在這里創建新的任務&#xff0c;設定觸發條件&#xff0c;并指定任務的操作。 事件查看器&#xff1a;這是一套日志記錄和分析工具&#xff0c;&#xff0c;你可以了解到系統的工作狀況&#xff0c;幫助診…

損失函數篇

損失函數 1、邊界框損失函數/回歸損失函數bbox_loss 2、分類損失函數cls_loss 3、置信度損失函數obj_loss YOLOv8損失函數 1、概述 通過YOLOv8-訓練流程-正負樣本分配的介紹&#xff0c;我們可以知道&#xff0c;經過預處理與篩選的過程得到最終的訓練數據&#xff1a; a…