不同文字相同背景 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,而且复用也很简单。