ホームページ >ウェブフロントエンド >H5 チュートリアル >IconFont アイコンリファレンスのメソッドステップ (コード)

IconFont アイコンリファレンスのメソッドステップ (コード)

不言オリジナル: 2018-09-13 17:40:1712763ブラウズ

この記事の内容は、IconFont アイコンのリファレンスのメソッド手順 (コード) です。必要な方は参考にしていただければ幸いです。

フロントエンド開発では、多くの場合、いくつかのアイコンが使用されます。 ui girl が提供するアイコンではニーズを満たせない場合は、iconfont.cn で独自のビジネスアイコンライブラリを収集して生成し、それを使用できます。

1. アイコンライブラリコードを生成します。

まず、必要なアイコンを検索して見つけ、ショッピングカートに集めます。ショッピングカート内で、選択したアイコンを追加できます。プロジェクトに移動します。 (存在しない場合は、新しいものを作成します)、その後生成されるリソース/コード

はプロジェクトディメンションに基づきます。

IconFont アイコンリファレンスのメソッドステップ (コード)

選択したプロジェクトページに移動し、「コードの生成」リンクをクリックします。以下にさまざまな導入方法のコードが生成されます。

IconFont アイコンリファレンスのメソッドステップ (コード)

2. インポート

SVG シンボル、Unicode、フォントクラスの 3 つのインポート方法から選択できます。最新のブラウザにインポートするには、SVG シンボルを使用することをお勧めします。

SVG シンボル

SVG シンボルの導入は、今後のモダンブラウザにおけるアイコン導入方法の主流となります。この方法では、シンボルをプリロードし、適切な場所に導入して、ベクトルグラフィックスとしてレンダリングします。これには次の機能があります:

複数色のアイコンをサポートし、単色のアイコンによる制限がなくなりました
いくつかのテクニックを通じて、フォントと同様に、フォントサイズと色によるスタイルの調整をサポートします。
IE 9 と最新のブラウザをサポートします。

手順は次のとおりです。

[シンボル] タブに切り替えて、プロジェクトによって生成されたアドレスコードをコピーします。

//at.alicdn.com/t/font_835630_0rudypqb4a.js

アイコンスタイルを追加します。特別な要件がない場合は、Ant Design アイコンのスタイルを直接再利用できます。

.icon {
  width: 1em;
  height: 1em;
  fill: currentColor;
  vertical-align: -.125em;
}

対応するアイコンを選択し、クラス名を取得します。これをページに適用します。

<svg>
    <use></use>
</svg>

Ant Design アイコンコンポーネントが提供する Icon.createFromIconfontCN({...}) メソッドを使用して、アイコンをより便利に使用することもできます。メソッドは次のとおりです。

アイコンコンポーネントを作成した後、プロジェクトアドレスを設定します。

import { Icon } from 'antd';

const IconFont = Icon.createFromIconfontCN({
  scriptUrl: '//at.alicdn.com/t/font_405362_lyhvoky9rc7ynwmi.js'
});

export default IconFont;

コンポーネントを使用するのと同じくらい便利に使用でき、構成スタイルをサポートします

<iconfont></iconfont>

Unicode

これは最も独創的な方法であり、次の 3 つの手順が必要です。導入を完了します:

プロジェクトによって生成されたフォントライブラリコードをコピーします。アイコン関連のスタイルを配置するための新しいスタイルファイルを作成できます。

@font-face {
  font-family: 'iconfont';
  src: url('//at.alicdn.com/t/font_405362_lyhvoky9rc7ynwmi.eot');
  src: url('//at.alicdn.com/t/font_405362_lyhvoky9rc7ynwmi.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_405362_lyhvoky9rc7ynwmi.woff') format('woff'),
  url('//at.alicdn.com/t/font_405362_lyhvoky9rc7ynwmi.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_405362_lyhvoky9rc7ynwmi.svg#iconfont') format('svg');
}

アイコンスタイルコードを追加します。特別な要件がない場合は、Ant Design アイコンスタイルを直接再利用できます。

.iconfont {
  display: inline-block;
  font-style: normal;
  vertical-align: baseline;
  text-align: center;
  text-transform: none;
  line-height: 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  &:before {
    display: block;
    font-family: "iconfont" !important;  /* 注意与 font-face 中的匹配 */
  }
}

プロジェクトで使用したいアイコンにマウスを移動し、「コードをコピー」をクリックすると、アイコンに対応するフォントエンコーディングが表示されます。を直接インポートできるようになりました。

<i></i>

Font Class

[Font class] タブに切り替えて、生成された次の CSS コードを次の場所に導入します。ページの先頭:

//at.alicdn.com/t/font_835630_0rudypqb4a.css

タグの導入方法が気に入らない場合は、上記のリンクのコードをスタイルファイルに直接コピーすることもできます。 Web サイトによってデフォルトで生成されるクラス名が気に入らない場合は、コードのこの部分を自分で書き直すことができます。たとえば、

 - .icon-ali-pay:before { content: "\e66b"; }              // 修改前
 - .monitor-icon-alipay:before { content: "\e66b"; }       // 修改后

この時点で、コードをコピーすることを選択できます。アイコン (クラス名です。クラス名が書き換えられた場合は、以前に書いたので、ここで変更したものを使用することを忘れないでください) に対応するものを直接使用します:

<i></i>

ただし、

import React from 'react';

const BizIcon = (props) => {
  const { type } = props;
  return <i></i>;
};
export default BizIcon;

Unicode と Font Class は本質的にはフォントであり、いくつかのフォントスタイル属性を通じてこのアイコンの表示を制御できます。同時に、ブラウザーの互換性は非常に優れていますが、複数色のアイコンはサポートされていません。

IconFont アイコンリファレンスのメソッドステップ (コード)

1. アイコン ライブラリ コードを生成します。

2. インポート

SVG シンボル

Unicode

Font Class

関連記事

1. アイコンライブラリコードを生成します。