专为 Rails 设计的前端模块化框架

渲染图标

Tao UI 使用 inline SVG 图标,可以使用 Icon Component 提供的 helper 方法添加图标:

<%= tao_icon :edit %>

上面的代码会生成这样的 HTML:

<svg class="icon icon-edit"><use xlink:href="#icon-edit"/></svg>

编译图标

上面 #icon-edit 引用的 inline SVG symbol 是在 turbolinks:load 的时候通过脚本插入页面的:

Tao.Application.initializer 'icons', (app) ->
  app.on 'page-load', (page) ->
    return if $('#tao-icons').length > 0
    document.body.insertAdjacentHTML 'afterbegin', """
    <svg id="tao-icons" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display:none">
      #{Tao._icons}
    </svg>
    """

Tao UI 提供了一个 generator 可以将项目需要的自定义 inline SVG symbol 编译到脚本里面:

rails g tao:icons app

上面的命令会把 app/assets/iconslib/assets/icons 里面的 SVG 源文件编译到 lib/assets/javascripts/tao/ui/icons/app.coffee 里面,注意你需要手动 require 这个文件。

Tips:推荐使用 Sketch 批量导出图标的 SVG 文件到相关目录

多个图标文件

有时候我们需要根据业务场景加载不同的图标文件,比如同一个网站的桌面端和移动端可能需要加载不同图标。

Tao UI 的 icon generator 提供了一个 paths 选项,用来指定 SVG 源文件的路径,所以我们只需要把 SVG 源文件拆分到不同的文件夹中,比如 app/assets/icons/desktopapp/assets/icons/mobile,然后使用 generator 生成两个图标文件:

rails g tao:icons desktop --paths=app/assets/icons/desktop
rails g tao:icons mobile --paths=app/assets/icons/mobile

最后,在桌面端和移动端的 assets package 里面分别 require 这两个图标文件就可以了。

图标列表

Tao UI 默认提供了下面这些图标:

loading
close

Tips:你可以在自己的项目里自定义上面的图标,只需要将对应的图标编译到 lib/assets/javascripts/tao/ui/icons/base.coffee 文件里。