svgアイコンの使用心得

初めてのfont-inconはfont awesomeライブラリを使用します.font-inconは、pngアイコンに比べて、ベクトル(任意のスケーリングでも歪んでいない)の利点があり、cssスタイルによって色のサイズを制御することができ、体積がより小さく(キャッシュ可能)、Iconfontを使ってfont-inconを作成する効率も大幅に向上しています.
Iconfontを使ってアイコンを作成してエクスポートするリソースファイルは、unicode、font-clss、smbolの3つの使用をサポートします.それぞれの特徴や使用手順は例で紹介されています.

unicode

font-class

smbol

smbol方式を使う主な原因はwebアプリの開発における多色アイコンがますます多くなっていることです.オリジナルアプリは簡潔を追求するために多色アイコンの使用を避けるのが一般的です.アイコンの色は多くappのテーマ色を表しています.webアプリはこの点に対して厳格ではありません.もう一つの理由はjsファイルを導入するだけで、font-classはcssファイルを導入し、四種類のフォントファイル(svg、ttf、woff、eot)を提供する必要があります.以下、両方からsmbolの使用を紹介します.

svg spriteを作る仕事はデザイナーによって作られました.smbol方式はsvg sprite技術に基づいており、その原理を詳しく紹介した文章があります.しかし、実際にはより良いツールがあります.Iconfontはオンラインツールです.svgアイコンを導入するだけでフォントリソースファイルを導き出すことができます.詳しいやり方は参考になります.

はsvgアイコンを使用する.htmlページでの使用手順は上記のデモを参照してください.また、svgアイコンはreactコンポーネントとしてパッケージ化され、reactアプリケーションで使用されます.ステップは以下の通りです.

はhtmlページ(一般的にindex)にsvg spriteのjsファイルを導入し、このファイルはcdnサーバに置いてキャッシュを設定することができ、読み込みを加速することができます.

"./iconfont.js"</span> >

パッケージreactコンポーネント

import React from 'react';
import PropTypes from 'prop-types';

const SvgIcon = ({
  type, size, color, ...rest
}) => {
  return (
    
  );
};
SvgIcon.defaultProps = {
  size: null,
  color: null,
};
SvgIcon.propTypes = {
  type: PropTypes.string.isRequired,
  size: PropTypes.number,
  color: PropTypes.string,
};
export default SvgIcon;

  ：
.icon {
   width: 1em; height: 1em;
   vertical-align: -0.15em;
   fill: currentColor;
   overflow: hidden;
}
  ：
type="shouji" color="red" size={40} />

転載先:https://juejin.im/post/5bae1b2fe51d450e735e7aff