阿里矢量图库的 icon 如何根据父元素自动放大缩小?

Question

RT
我有一个这样的 icon

<div class="parent">
    <i icon-ks-tubiao-zhuzhuangtu"/>
</div>

这个 parent 是一个vue递归组件

当父元素 宽度是 100px 的时候 i 的大小是 16px
当父元素 宽度是 200px 的时候 i 的大小是 32px
以此类推...

大概效果图

但是我尝试设置 百分比的时候 好像无效,只能 显性设置 fontSize em rem

求问 有没有其他比较 s 的方式~

Answer 1

简单的就是使用js动态计算，比如算rem或父元素宽度

使用css字体的话比较难实现，想到的一个思路是使用vw设置字体大小，然后用字体撑开父元素

所以不想用js调整的话，建议使用svg