在一些现代的扁平化设计网站,特别是移动端网站,经常会包含许多简单而清晰的小图标,例如网站图标、用户的默认头像、移动端网页首页底部固定的切换栏等,这些小图标一般都是由美工做好,可能会放到精灵图上,前端再进行裁切展示。
而实际上,这些简单的小图标完全没必要让美工来做,前端完全可以通过 svg
使用代码把这些简单的图标画出来,并且,因为这些图标是用代码描述出来的,所以如果想要修改这些图标,例如改变图标的颜色、图标的形状、大小等,都只是改几行代码的事情,非常简单,根本无需美工返工重做。
本文不是阐述如何利用 svg
来进行画图的,不了解 svg
的可以前往 这里查看, 本文主要说一下如何在网站中使用 svg
。
svg
使用 XML
格式定义图像,你也可以把它看做是一般的 HTML
标签,镶嵌在网页中呈现出某种效果,在网页中使用svg
的基本示例如下:
效果如下:
可以看到,普通网页中使用 svg
是很简单的,只要你能把 svg
图标画出来,在网页中的呈现完全不是问题。
你完全可以像在 普通网页中使用 svg
那样在Vue
中使用,不过,既然已经是选择 vue
来组件化开发项目了,那么在一堆组件中,穿插一大段的 svg
毕竟有点不太好看。
一种解决方法是,利用 svg
的 use
标签,不直接在主页面中编写绘制svg
图标的代码,而是把这一大段的代码放到另外的文件中,然后使用 use
引用这段绘制图标的代码即可(好像饿了么移动端就是这么干的)。
例如,将所有绘制 svg
的代码放到 svg-icon.vue
文件中,所有图标的绘制代码使用 symbol
标签分隔开并单独命名,避免错乱,然后将这个文件当做是一个组件导出,在主页面中引入此组件,接着,在需要 使用 svg
图标的地方,通过 use
标签将其引入。
svg-draw.vue
代码示例如下:
整个 vue
组件导出一个大的 svg
,此svg
中包含了许多小的图标,类似于精灵图,每个图标使用 symbol
分隔,并单独命名以方便引用。
使用示例如下:
// index.vue
......
然后,就可以看到网页中顺利出现对应的 svg
图标了:
不过,还有个问题,如果当前网站需要用到的 svg
图标很多,势必就造成 svg-icon.vue
这个文件体积逐渐变大,当前网页命名只需要用到其中一个 svg
图标,结果你把几百个图标的 svg
代码,全部加载了进来,明显不太友好,最好是能够按需加载,当前网页需要哪些图标就加载哪些,甚至一些可能出现可能不出现的图标,也在该出现时再加载,如果没有机会出现,那么永远不加载。
Github
上有很多此类的插件,我介绍一个我觉得很好用的插件:vue-svg-icon,简单易用、快速上手。
首先,安装此插件,就不多说了,安装完成后,在项目的入口文件中注册此插件以方便全局调用:
import Icon from 'vue-svg-icon/Icon.vue'Vue.component('icon', Icon)
然后在根目录的 /src
目录下新建一个 svg
目录(目前这个路径只能是这样,不可配置为其他路径和目录),然后再这个目录中放入你想要使用的 svg
图标的 svg
文件即可。
例如一个微信图标的 svg
如下:
将上述代码保存到一个 .svg
的文件中,例如 wx.svg
,放到 /src/svg
目录中,这样就完成了准备工作。
接着,想要使用的话,很简单,直接在 vue
组件中这么写:
class="wx-icon" name="wx">
刷新页面时,打开控制台,可以看到页面中加载了这个 wx.svg
文件,这样,就实现了 svg
文件的按需引入。
在 React
中使用Svg
和 vue
一样,同样存在 3种方案,一种是直接在 react
的 reader
方法中写入 svg
代码,第二种则是将所有 svg
绘制代码放到一个文件中,然后将这个文件一次性载入,使用 use
标签引用响应的 svg
图案,第三种则是使用插件按需引入。
第一种直接在 渲染方法中写入 svg
的方法就不多说了,第二种也很简单 ,和 vue
一样,只不过写法上需要注意一下。
render() {
return (
)
}
主要是需要注意,因为 react
使用 jsx
语法,不允许出现 -
连字符,所以像 fill-rule
这样的属性,就必须写成 fillRule
,引用的时候同样如此。
// 引用的时候需要将 `xlink:href` 改写成 xlinkHref
第三种按需引入,只加载当前需要的 svg
形状,同样是将每一个 svg
图片作为一个单独的文件保存,然后再需要使用的地方进行引用。 Github
上有个项目 react-svg,这个项目内部其实是对 SVGInjector的包装,
安装 react-svg之后,就可以像下面这样使用了:
import ReactSVG from 'react-svg'
ReactDOM.render(
console.log(svg)}
className="example"
/>,
document.querySelector('.Root')
)
一般都只是在使用小图标的时候才考虑 svg
,而这些小图标一般都比较简约,绘制起来也没什么难度,不过大部分情况下没有必要自己来画,很多网站都提供svg
的图标下载,例如阿里的 iconfont,图标数量众多,基本可以满足绝大部分的需求,另外,类似的网站还有 easyicon 、 icomoon等。
——————————————————
长按二维码,关注大转转FE