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

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

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

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

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

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

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

2. インポート

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

SVG シンボル

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

1. 複数色のアイコンをサポートし、単色のアイコンによる制限がなくなりました

2. いくつかのテクニックを通じて、フォントと同様に、フォント サイズと色によるスタイルの調整をサポートします。

3. 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-ベクター アイコンの使用 font_html/css_WEB-ITnose

iconfont フォント アイコンと詳細な説明さまざまな CSS の小さなアイコンの

#

以上がIconFont アイコンリファレンスのメソッドステップ (コード)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。