Core Iconset -- Polycasts #02 - 1505040788
Last updated
Was this helpful?
Last updated
Was this helpful?
视频发布时间
2014年10月6日
视频介绍
Creating your own icon set in Polymer is a breeze! In this video we'll look at how to combine different iconsets with the core-icon elements, and I'll show you how to create your own custom iconsets using SVG images.
视频推介语
暂无，待补充。
翻译
润稿
终审
原始链接
中文字幕
翻译流水号
加入字幕组
——
——
——
1505040788
各位观众老爷们
大家好最近怎么样
我是罗伯多德森 在这期节目中
我将向你们介绍如何通过
加载额外的图标集来加强你的core-icon
以及使用svg创建自定义图标集
让我们来看看具体操作
我们需要从头开始
首先 建立自己的图标
这个视频将展示出我们要讲的所有概念和步骤
所以我们将会使用
core-iconset-svg组件
要注意的是 还有一个
主要生成栅格图标集的core-iconset组件
我们将重点放在SVG上面
因为它看起来更美观
并且在不同的屏幕上放大效果更好
这是我们要展示的第一个图标
我们将命名为fancy-circles
实际上这个不是幻想
这只是几个重叠的圆圈
但这使我们的图标集有了个良好的开端
首先我们要做的就是
引入core-iconset-svg
组件的定义
在这里有bowercomponents/core-iconset-svg
实际上将在这里加载这个标记
所以我就能够在应用程序里使用它了
接下来做的就是如何设置这个东西了
我要给它一个ID
当然这个ID是非常重要的
因为它就是我的图标集的名字
当用户要从中获取一些东西时
这就是用户以后查到我的图标集的依据
我们称他为自定义图标
如果你想自定义图标大小也可以
看这里 我设置把它的数值设置为50
就是说它的像素为50
我们设置的所有的图标在默认状态下像素是24
但是设置的这个图标大小是起了推动了作用
我重申一次 它是具有可选性的
如果你觉得没有必要 你可以不必设置
现在我要打开我的图标设置标签
将SVG标记搁在这儿
这个实际上是SVG代码将为我们生成那些圆圈
需要注意的是 我们还需要设置一个ID
这个实际上就是我们图标的名称
因此用户需要使用这个图标时
他们就会用到这个图标集
然后才能用这个图标
举个例子
这有一个core-icon组件
图标属性是空的
我们要用到图标集 这都是自定义图标
我们要用到fancy-circles图标时
用冒号将图标和图标集分开
现在我们屏幕上出现的就是图标
但是它是不是有点和我们预想的不同
这都是一种颜色 确实有些单调
但是这个实际上就是SVG炫酷的一方面
在这个嵌套之下 所有的都标记了
我们可以查看并锁定不同的SVG组件分别设计
我来告诉你们它是怎样运作的
这是一个图标 它左边是一个设计组件
接下来我要做的就是
针对我要着色的那些图标编写选择器
我先从第一个圆圈开始编写
按照这个路径 一直到最后的循环
若有需要 我可以设计各个部分
还记得上次的视频不 我们在那个视频里
用颜色功能给图标着上同样的色彩
你还可以使用那种方法
但如果你想要更体现你的操控力
你就可以使用SVG 他会让你更加满意
现在你们已经做好开头步骤了
做好了第一个图标集 还了解了所有运行过程
接下来要做的就是选取另一个人的图标集
把它加载到我的项目中
要是你们还记得上次的视频
那么现在我就要展示这个链接
这链接涉及到核心文档默认的图标集
滚动页面 你会发现这还有很多的其它内容
这还有些别的图标集
像视频 地图 硬件之类的视频音频图标
最炫的是如果你想从图标集中加载一个图标
它的工作原理与我们刚才展示的自定义图标完全相同
举个例子
如果我想在音频视频图标集里加载图标
就要引入图标的定义
所以我将访问core-icons av-icons
然后才在coreicon里使用音频视频图标
我想要一个简易图标 有冒号 箭头
这种方法就可以做成我想要的图标
特别简单吧
现在你们了解了该怎样创建自己的图标集了
你知道如何获得别人已经为你设置好了的图标集了
并把它妥妥地下载到你的程序里
现在我们切换到代码编辑器
我们就得到了出现在屏幕的这些内容
我们有设置好了而且可以运行的程序
我们首先要做的就是创建一个全新的文件
命名为custom-icons.html
实际上我们要做的就是给我们所写的图标下定义
既然我们已经创建好了文件
我们就只需要引入
thecore-iconset-svg的定义
所以我假设它在bower_components目录内
并且写出core-iconset-svg
而且既然已经准备就绪
我就可以只用图标集标记我的页面了
我们要设置并使用它
就要给它确定个ID
这样我们的图标就有名字啦
我们管它叫做自定义图标
我们还要规定图标大小属性
将它设为50
记住啦 这个图标大小属性是可选的
你不需要管它
我这样做纯属为了搞笑 让你们能够看到
我继续将它粘贴到iconSVG代码中
你看我已经设置好了ID
我的图标名叫fancy-circles
而且这时候我的图标集也基本完成了
这是其中一个图标集 里面只有一个图标
但是这很不错
因为我们将看到我们可以拿得出手的一些东西
所以打开我的索引文档
我就必须做几件事情
我要确认输入平台
我将输入bowercomponents/platform/platform.js
我准备引入core-icon的定义
这样我可以显示我的图标
我要引入刚创建的自定义图标文件的定义
现在我的图标集已经可以使用了
然后在我的标签里 我将建一个core-icon
我要设置自定义图标的属性
然后在那里打个冒号
然后就输入fancy-circles
如果我保存这个 打开浏览器 刷新页面
在上面 你将看到一个小图标
我会将它放大一下 好让你们更容易看见
这就是我们刚弄好的fancy-circles
如果你撤销 我们得进去 再加一些样式
它就看起来像我们所预期的了
所以我要加一个style元素
并再次粘贴到CSS里面
省得你们在这看我慢慢打字
现在差不多都好了 我要清除一点格式
保存 刷新页面
现在如我们所料的图标就出现了
真正酷的是可以在里面
把这些填充色改成我们想要的颜色
我们可以设置成红色 绿色 蓝色
这并不是要最好看的图标
但它一定程度上可以证明
我们确实能够访问或锁定图标的不同部分的话
我们还可以改变他的外观
我已经向你展示怎样载入你的自定义图标
我们倒回去稍微理一下
现在我们从附加项里选一个来加载一个图标
我要在这个imports区
将我AV图标的定义包含进去
我假设它在bower_components里
我将请求core-icons/av-icons.html
如果你真的打开了浏览器组件文件夹
而且打开了图标集
你就能够看到在那的所有的不同图标
AV图标 通信 装置 硬件
许多很酷的东西都在这里供你把玩
非常简单 只是需要引入定义而已
在我的标签下面 我要添加另外的core-icon
这次
我要把图标属性设成av:play-arrow
它会在AVset那里显示一个播放箭头
刷新页面 我会在上面看到一个黑色图标
如果我想设置它 给它上色
我或许能给它一个类名 或类似的东西
我叫这个类为icon-play
然后在我的CSS里 我的图标将使用这个类
如果说icon-play应该设置
成亮绿色或者是其他的
只是告诉你 你可以点进去
接着把整个图标设置成同一颜色
酷 太赞了
现在有个东西 真的很整齐
我们以往从未谈及过的就是指出
在核心元素中有一堆不同的元素集支持图标的属性
我要引入core-icon按钮的定义
这是我从未见过的事情 但它确实方便
我植入一个core-icon按钮
接着我将使用它的图标属性
载入一个AV图标
我需要一个core-icon按钮
我把它的图标设成av:play-arrow
返回到浏览器
刷新网页 如果我稍微调小浏览器窗口的尺寸
现在我们弄懂了这个很酷的播放键
超简单
现在你是正式的core-icon大师
你知道怎么创建图标集
怎么加载别人给你的图标集
你知道怎么利用CSS设置格式
这意味着你可以出师啦
去创作真正的厉害的东西
感谢收看
