柚子快報(bào)邀請(qǐng)碼778899分享：在微信小程序中使用svg圖標(biāo)

http://yzkb.51969.com/

在項(xiàng)目中引入圖標(biāo)組件是很常見(jiàn)的一個(gè)問(wèn)題，但是這里我在小程序中引入圖標(biāo)組件的時(shí)候報(bào)錯(cuò)了！ 這個(gè)主要原因是 微信小程序上不支持 SVG 字體圖標(biāo)！

所以參考微信開(kāi)放社區(qū) 我們想要在微信小程序中使用svg圖標(biāo)組件可以將其進(jìn)行轉(zhuǎn)化轉(zhuǎn)化為base64之后進(jìn)行使用 這里我們用到了

https://icomoon.io/ 將svg圖標(biāo)進(jìn)行打包 成功之后下載并引入項(xiàng)目 由于微信小程序不方便直接使用外部字體庫(kù)，普遍的做法，是使用transfonter ，將外部字體，轉(zhuǎn)化成base64格式，之后進(jìn)行使用 ① ② 將下載之后的字體圖標(biāo)文件中的 文件選中之后在transfonter 轉(zhuǎn)化為base64的形式1.使用 transfonter，將字體文件上傳。 2.參數(shù)選填好后，convert一下。

合并字體圖標(biāo)

將圖標(biāo)組件進(jìn)行封裝

// // 公共圖標(biāo)組件

import { View } from '@tarojs/components'

import classNames from 'classnames'

import '../../assets/transfonter/stylesheet.css'

interface SvgIconProps {

icon: string

size?: string

color?: string

}

function SvgIcon({

icon = 'icon-svgicon',

size = '24px',

color = '#000000',

}: SvgIconProps) {

const containerStyle = {

display: 'inline-block',

fontSize: size,

// color: color !== 'inherit' ? color : undefined,

}

const iconClass = classNames(icon, {

[`icon-color-${color.replace('#', '')}`]: color, // 根據(jù)傳入的 color 添加顏色類(lèi)

})

// const pathClass = classNames(icon, {

// [`color-${color.replace('#', '')}`]: color && color !== 'inherit',

// })

return (

)

}

export default SvgIcon

在對(duì)應(yīng)的頁(yè)面中使用

import SvgIcon from '@/components/svgIcons'

上面的代碼中就成功實(shí)現(xiàn)了在微信小程序中使用svg圖標(biāo)，但是這里還有一個(gè)問(wèn)題，就是svg圖標(biāo)中顏色的填充使用到了svg內(nèi)部的方法

fill="purple"

這里我們進(jìn)行封裝之后填充的顏色應(yīng)該怎么改變吶？ 可以看出上面的代碼中我也嘗試了方法，但是沒(méi)有成功！ 現(xiàn)在正在嘗試其他的方法?。?記錄一下自己的學(xué)習(xí)過(guò)程吧?。g迎批評(píng)指正?。?！

柚子快報(bào)邀請(qǐng)碼778899分享：在微信小程序中使用svg圖標(biāo)

http://yzkb.51969.com/

精彩內(nèi)容