[WeChat ミニ プログラム - ネイティブ開発] カスタム アイコンを追加 (例として Ali アイコン ライブラリを使用)

方法 1: svg をダウンロードしてインポートする

• 利点: 操作が簡単、カラフルなアイコンをサポート
• 短所: ソースコードのサイズが大きくなる

アイコン画像を svg 形式でダウンロードし、ソースコードに入れて使用します

アプレット プロジェクトのパスは次のとおりです。assets\icon\美食.svg

使用時 - コード例

<image class="imgIcon" src="/assets/icon/美食.svg" />

.imgIcon {
    
    
  height: 60rpx;
  width: 60rpx;
  margin-right: 20rpx;
}

方法 2: wxss をインポートする

• 長所: ソース コードのサイズが増えない
• 短所：カラフルなアイコンに対応していない、更新が面倒

独自のアイコン プロジェクトにアイコンを追加した後、対応する css リンクを生成します

ブラウザが css リンクを開きます

アプレットプロジェクトで新しく作成されたファイルassets\icon\icon.wxssに

@font-face {
    
    
  font-family: "iconfont";
  /* Project id 1167694 */
  src: url('//at.alicdn.com/t/c/font_1167694_c6t4jllqo2b.woff2?t=1681094540417') format('woff2'),
    url('//at.alicdn.com/t/c/font_1167694_c6t4jllqo2b.woff?t=1681094540417') format('woff'),
    url('//at.alicdn.com/t/c/font_1167694_c6t4jllqo2b.ttf?t=1681094540417') format('truetype');
}

.iconfont {
    
    
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-feiji:before {
    
    
  content: "\e8b2";
}

.icon-zhuizhuiju:before {
    
    
  content: "\ebdb";
}

.icon-lvyou:before {
    
    
  content: "\e618";
}

.icon-meishi:before {
    
    
  content: "\fab7";
}

.icon-kejian:before {
    
    
  content: "\e630";
}

.icon-bukejian:before {
    
    
  content: "\e604";
}

使用時 - コード例

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

ページの wxss で、アイコンの wxss ファイルをインポートすることを忘れないでください

@import "/assets/icon/icon.wxss"