可编辑的 SVG 图标系统 |
您所在的位置:网站首页 › 团队简单图标 › 可编辑的 SVG 图标系统 |
您正在浏览的是 Vue 2.x 的文档。Vue 3 的文档在这里。 可编辑的 SVG 图标系统 基本的示例创建一套 SVG 图标系统的方式有很多,但是有一种方法能够充分发挥 Vue 的能力,那就是把可编辑的内联图标创建为组件。这样做有好多好处: 图标易于实时修改 图标可以带动画 你可以使用标准的 prop 和默认值来将图标保持在一个典型的尺寸并随时按需改变它们 图标是内联的,所以不需要额外的 HTTP 请求 可以动态地使得图标可访问首先,我们将为所有的图标创建一个文件夹,并将这些图标以一种标准化的方式命名以便获取它们: components/icons/IconBox.vuecomponents/icons/IconCalendar.vuecomponents/icons/IconEnvelope.vue 这里有一个示例的仓库,你可以看到全部的配置:https://github.com/sdras/vue-sample-svg-icons/。 我们将会创建一个基础图标 (IconBase.vue) 组件,并使用了一个插槽。 {{ iconName }} icon你可以像这样使用这个基础图标,唯一可能要做的就是根据你图标的 viewBox 来更新其 viewBox。在基础图标里会有 width、height、iconColor 以及图标的名字等 prop,这样我们就可以通过 prop 对其动态更新。这个名字将会同时用在 的内容及其用于提供可访问性的 id 上。 我们的脚本是下面这样的,我们设了一些默认值,这样在没有特别设置的情况下图标渲染出来就是一致的: export default { props: { iconName: { type: String, default: 'box' }, width: { type: [Number, String], default: 18 }, height: { type: [Number, String], default: 18 }, iconColor: { type: String, default: 'currentColor' } }}currentColor 会成为 fill 的默认值,于是图标就会继承周围文字的颜色了。我们也可以根据需求传递一个不一样的颜色的 prop。 我们可以这样使用它,通过 IconWrite.vue 将图标的路径包含于其中,作为其唯一的内容: 现在,如果我们想要创建更多种尺寸的图标,我们可以简单的这样做: 当我们想要赋予它们动画,尤其是在一个交互动作的时候,在组件中控制图标是非常方便的。内联 SVG 对各种交互行为都有最高级的支持。这里有一个图标在点击之后产生动画的基本的示例: Scissors Animated Icon ... ... 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 }) } }} 我们通过 ref 将我们需要移动的路径做了分组,因为这把剪刀的两侧需要同时移动,所以我们会创建一个传入 ref 的可复用的函数。并使用 GreenSock 帮助我们完成动画并解决 transform-origin 的浏览器兼容性问题。 在 CodePen 查看 Vue (@Vue) 的 可编辑的 SVG 图标系统:带动画的图标。 很容易做到吧!并且很容易实时更新。 你可以在这个仓库看到更多动画的示例。 注意事项设计师可能会改变他们的主意。产品需求也可能会变更。在一个基础组件中保持整个图标系统的逻辑,意味着你可以快速更新你所有的图标并快速丰富你的整个图标系统。甚至通过图标加载器,有些情况下需要你重新创建或编辑每个 SVG 来完成全局的改动。这个方法可以节约你的时间,减少你的痛苦。 何时避免使用这个模式当你有许多图标用在你网站不同的地方时,这类 SVG 图标系统是非常有用的。如果你只在一个页面上重复使用相同的图标很多次 (比如一个大表格中每行的删除图标),可能把它们编译到一个雪碧图表并通过 标签来加载会更好。 其它替代方案其它帮助你管理 SVG 图标的工具有: svg-sprite-loader svgo-loader这些工具会在编译时打包 SVG,但是在运行时编辑它们会有一些麻烦,因为 标签在处理一些复杂的事情时存在浏览器兼容问题。同时它们会给你两个嵌套的 viewBox property,这是两套坐标系。所以实现上稍微复杂了一些。 发现错误?想参与编辑? 在 GitHub 上编辑此页! |
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |
CopyRight 2018-2019 实验室设备网 版权所有 win10的实时保护怎么永久关闭 |