taro icons

タロイモのアイコン

Taro をベースにしたミニ プログラム アイコン ライブラリ

特性

• オンデマンドでロードし、ニーズに応じてさまざまなアイコン ライブラリのロードを選択し、パッケージ サイズを削減します
• 約6700個のアイコンから選択可能

サポートされているアイコン ライブラリ:

• Ionicons (v4.5.5、696 アイコン、~134KB)
• マテリアルアイコン (v3.0.1、935 アイコン、~112KB)
• MaterialCommunityIcons (v3.5.95、3596 アイコン、~495KB)
• FontAwesome (v5.8.1、1513 アイコン、~322KB)

インストール

npm install taro-icons --save

使用

app.jsに必要なアイコン ライブラリscssファイルMaterialIconsなど) をインポートします。

 // app.js
// 请根据需要选择导入的 scss，这里全部导入
import 'taro-icons/scss/MaterialCommunityIcons.scss' // 495KB
import 'taro-icons/scss/MaterialIcons.scss' // 112KB
import 'taro-icons/scss/Ionicons.scss' // 134KB
import 'taro-icons/scss/FontAwesome.scss' // 322KB

次に、アイコンが必要な d に対応するcomponentを導入します。

 import {
  MaterialIcons ,
  MaterialCommunityIcons ,
  Ionicons ,
  FontAwesome ,
} from 'taro-icons' ;
...

< MaterialIcons name = 'settings' size = { 24 } color = '#000000' />
< MaterialCommunityIcons name = 'account' size = { 32 } color = '#000000' / >
< Ionicons name = 'ios-woman' size = { 32 } color = 'pink' />
< FontAwesome family = 'brands' name = 'weixin' size = { 32 } / >

name必須です。具体的な使用法については、対応する Web サイトに記載されているexampleを参照してください。

アイコンの小道具

財産	説明する	タイプ	デフォルト値
名前	表示する必要があるアイコンの名前は、対応するアイコン ライブラリの Web サイトで確認できます。	弦
サイズ	アイコンのサイズ (px)	番号	24
色	アイコンの色	弦	#000000
家族	FontAwesome のユニークなプロパティ (ソリッド、レギュラー、ブランド)	弦	固体

️注意事項

微信开发者工具で、[設定] -> [プロジェクト設定] -> [基本ライブラリのデバッグ] を選択し、バージョン2.2.3以降を設定すると、アイコンが正常に表示されます。