可编辑的 SVG 图标系统
- 图标易于实时修改
- 图标可以带动画
- 你可以使用标准的 prop 和默认值来将图标保持在一个典型的尺寸并随时按需改变它们
- 图标是内联的,所以不需要额外的 HTTP 请求
- 可以动态地使得图标可访问首先,我们将为所有的图标创建一个文件夹,并将这些图标以一种标准化的方式命名以便获取它们:
这里有一个示例的仓库,你可以看到全部的配置:。
我们将会创建一个基础图标 (IconBase.vue
) 组件,并使用了一个插槽。
你可以像这样使用这个基础图标,唯一可能要做的就是根据你图标的 viewBox
来更新其 viewBox
。在基础图标里会有 width
、height
、iconColor
以及图标的名字等 prop,这样我们就可以通过 prop 对其动态更新。这个名字将会同时用在 <title>
的内容及其用于提供可访问性的 id
上。
export default {
props: {
iconName: {
type: String,
default: 'box'
width: {
type: [Number, String],
},
height: {
type: [Number, String],
default: 18
},
iconColor: {
type: String,
default: 'currentColor'
}
}
}
currentColor
会成为 fill
的默认值,于是图标就会继承周围文字的颜色了。我们也可以根据需求传递一个不一样的颜色的 prop。
我们可以这样使用它,通过 IconWrite.vue
将图标的路径包含于其中,作为其唯一的内容:
现在,如果我们想要创建更多种尺寸的图标,我们可以简单的这样做:
<p>
<icon-base
width="12"
icon-name="write"
><icon-write /></icon-base>
<!-- 或者你可以使用默认值,即 18 -->
<icon-base icon-name="write"><icon-write /></icon-base>
<!-- 或者让它更大一些 :) -->
<icon-base
width="30"
height="30"
icon-name="write"
><icon-write /></icon-base>
</p>
当我们想要赋予它们动画,尤其是在一个交互动作的时候,在组件中控制图标是非常方便的。内联 SVG 对各种交互行为都有最高级的支持。这里有一个图标在点击之后产生动画的基本的示例:
import { TweenMax, Sine } from 'gsap'
export default {
methods: {
startScissors() {
this.scissorAnim(this.$refs.rightscissor, 30)
this.scissorAnim(this.$refs.leftscissor, -30)
},
scissorAnim(el, rot) {
TweenMax.to(el, 0.25, {
rotation: rot,
repeat: 3,
yoyo: true,
svgOrigin: '50 45',
ease: Sine.easeInOut
})
}
}
}
在 CodePen 查看 Vue () 的 可编辑的 SVG 图标系统:带动画的图标。
很容易做到吧!并且很容易实时更新。
你可以在看到更多动画的示例。
设计师可能会改变他们的主意。产品需求也可能会变更。在一个基础组件中保持整个图标系统的逻辑,意味着你可以快速更新你所有的图标并快速丰富你的整个图标系统。甚至通过图标加载器,有些情况下需要你重新创建或编辑每个 SVG 来完成全局的改动。这个方法可以节约你的时间,减少你的痛苦。
当你有许多图标用在你网站不同的地方时,这类 SVG 图标系统是非常有用的。如果你只在一个页面上重复使用相同的图标很多次 (比如一个大表格中每行的删除图标),可能把它们编译到一个雪碧图表并通过 <use>
标签来加载会更好。