React+Electron桌面应用开发文章索引
这篇文章继续之前的文章，介绍如何添加图标元素。
SVG图标
从官方实例中我们得到，只要引入import SvgIcon from 'material-ui/SvgIcon'，然后render()中增加下面的代码就可以生成一个SVG主页图标
h(SvgIcon, {
color: "primary"
}, [
h('path', {
d: 'M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z'
})
]),
这里使用了path标记，规范文档看这里
如何得到各种图标的d后面的长串值？我们可以从很多网站下载到svg格式文件。
Material Icons 900+图标
IconFont阿里图标库 200W+图标
打开svg文件看起来像这个样子:
我们只需要第二行path中引号中M19...的部分。
为了统一使用，我们把所有图标的d值都放入一个文件Utilities/Myicons.js，在需要的时候引用它：
import h from 'react-hyperscript'
import SvgIcon from 'material-ui/SvgIcon'
const icon = (iconName, props) => {
return h(SvgIcon, props, [
h('path', {
d: datas[iconName] || ''
})
])
}
const datas = {
'favorite': 'M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z',
'favorite border': 'M16.5 3c-1.74 0-3.41.81-4.5 2.09C10.91 3.81 9.24 3 7.5 3 4.42 3 2 5.42 2 8.5c0 3.78 3.4 6.86 8.55 11.54L12 21.35l1.45-1.32C18.6 15.36 22 12.28 22 8.5 22 5.42 19.58 3 16.5 3zm-4.4 15.55l-.1.1-.1-.1C7.14 14.24 4 11.39 4 8.5 4 6.5 5.5 5 7.5 5c1.54 0 3.04.99 3.57 2.36h1.87C13.46 5.99 14.96 5 16.5 5c2 0 3.5 1.5 3.5 3.5 0 2.89-3.14 5.74-7.9 10.05z',
}
const MyIcons = {
icon,
datas,
}
export default MyIcons
在这里我们还添加了icon函数快速生成图标icon(iconName,props)，这样我们在任意页面中引入import MyIcons from '../../Utilities/MyIcons'，然后render()中添加下面代码就可以生成图标了：
h('h1', this.state.title),
MyIcons.icon('favorite', {
color: 'primary'
}),
MyIcons.icon('favorite border', {
color: 'primary'
}),
MaterialDesign图标
可以从网上下载到几乎所有希望的SVG图标，也可以使用PS等画图软件来制作新的SVG图标。SVG可以任意变色，我们把图标都整合到一起也更加精简。但SVG使用起来确实不方便。
其实可以直接引入MaterialDesign的900+图标的，比如引入闹钟图标import AccessAlarmIcon from '@material-ui/icons/AccessAlarm',全部图标名称看这里
然后使用它:
h(AccessAlarmIcon, {
color: 'primary'
}),
其他图标
FontAwasome
FontAwasome 600+字体图标
这也是网页开发者常用的另外一套图标。参照它的教程可以使用，先要在index.html中引用css文件...font-awesome.min.css，其他页面元素才能使用class:'fa fa-heart'。它有自己的变色方法，并不能直接使用'primary'这个值。
我建议还是下载FontAwasome单个图标的svg文件，参照我们上面的方法使用。
从这里可以点击进入FontAwasome的SVG下载页面
图片图标
我们经常使用设计精美的图片作为图标，你可以直接把图片放在dist/imgs文件夹下面，然后像使用图片那样使用它，注意这里src路径开始不需要添加点或斜杠：
h('img', {
src: 'icons/heart-red.png'
}),
要知道，图片是不能通过代码直接变色的。
致力于让一切变得简单
如果您发现文章错误，请不吝留言指正；
如果您觉得有用，请点喜欢；
如果您觉得很有用，欢迎转载~
END