不同文字相同背景 icon 解决方案

最近在项目中遇到一个不同文字相同背景 icon 的问题 (下图) ，直接导出成三张 png 觉得太占空间，考虑用 svg 可以变颜色，文字浮于 svg 上方。但又觉得与其用绝对定位，不如直接用 svg 自己的 text 标签，这样也不至于浏览器显示不一致。

这里有个很好用的 svg 处理工具 svgo，可以去除没用的标签，合并重复样式。我这个 svg 被压缩了 39.7% 只剩 0.586k。如果是三张 png 的话，加起来得有差不多 20k。

npm install svgo -g

svgo yours.svg

# Done in 289 ms!
# 0.972 KiB - 39.7% = 0.586 KiB

svg 用 Illustrator 导出，再用 svgo 压缩一下，放在 vue 模板内，如下。

<template>  
  <svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 78 69">
    <title>Combined Shape</title>
    <g transform="translate(-51 -353)">
      <path id="Combined-Shape" :fill="color" d="..."/>
    </g>
    <text transform="translate(29.977 50.115)" class="font">{{num}}</text>
  </svg>
</template>

<script>  
  export default {
    name: 'rank',
    props: {
      num: Number,
      color: String
    }
  }
</script>

<style>  
  .font {
    font-size:36px;
    font-weight: 700;
  }
</style>  

如此一来，只需要简单复用此组件就万事大吉了。

<template>  
  <div class="hello">
    <rank num="1" color="#6cc"></rank>
    <rank num="2" color="#6c6"></rank>
    <rank num="3" color="#ccc"></rank>
  </div>
</template>

<script>  
import Rank from './Rank'

export default {  
  name: 'Hello',
  components: {
    Rank
  }
}
</script>  

十分完美，整个组件只有 0.7k，而且复用也很简单。