svg圖示使用心得

WinMin發表於2018-09-28
SVG

初次接觸font-icon是使用font awesome庫。font-icon比png 圖示的優點是向量（任意縮放也不失真），可通過css樣式控制大小顏色，體積更小（可被快取），使用Iconfont製作font-icon效率也大大提高。

使用Iconfont製作圖示後匯出的資原始檔支援三種使用方式，分別是unicode，font-clss 和 symbol。各自的特點和使用步驟在示例中也有介紹詳見demo。

促使我轉向使用symbol方式的主要原因是web app開發中多色圖示越來越多，原生app為追求簡潔一般都避免使用多色圖示，圖示的顏色多體現app的主題色，web app 對這點要求並不嚴格；另外一個原因是隻需要引入一份js檔案，而font-class需要引入css檔案和提供四種字型檔案（svg,ttf,woff,eot）.以下從兩方面介紹symbol的使用：

  1. 製作svg sprite，這項工作是由設計師做的。symbol方式依據的是svg sprite技術，有一篇文章詳細介紹了它的原理。但是實際上有更好的工具可以幫助生成，Iconfont就是一款線上工具，只需要匯入svg圖示就能匯出字型資原始檔，詳細做法可參考幫助。
  2. 使用 svg 圖示。在html頁面上的使用步驟見上面的demo，此外svg圖示可以封裝成一個react元件，在react應用中使用，步驟如下：
  • 在html頁面（一般是index.html）上引入svg sprite的js檔案，這個檔案可放在cdn伺服器上並設定快取，可以加速載入。
<script src="./iconfont.js" ></script>
複製程式碼
  • 封裝react元件
import React from 'react';
import PropTypes from 'prop-types';

const SvgIcon = ({
  type, size, color, ...rest
}) => {
  return (
    <svg className="icon" style={{color:color,fontSize:size}} {...rest}>
      <use xlinkHref={`#icon-${type}`} href={`#icon-${type}`} />
    </svg>
  );
};
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;
}
使用：
<SvgIcon type="shouji" color="red" size={40} />

複製程式碼

相關文章