分享开发经验瓜分5000元大奖，聊聊#我写代码那些年#的故事

Flag: 坚持为社区贡献高颜值原生自定义组件！🎉🎉🎉

Motive: 在遇到问题的时候得到过很多朋友的耐心回答和讲解，所以也希望能为社区做点贡献！🌈🌈🌈

Introduce: 非常高兴和大家在这里相遇，喜欢写代码，非常欢迎社区的朋友与我交流！🚀🚀🚀

今日原生自定义组件：《图标》

先来看下内置图标库的内容，需要的小伙伴可以滚动至文章末尾获取组件。

基本使用

通过 name 属性来选择图标，可选值参考上方图片

<gu-icon name="success" />

设置图标大小

可以通过修改 size 属性来设置图标的大小，属性接受的参数类型为 String | Number 当传入数字类型的参数时，默认使用的css单位是px ，或者可以传入带有任意css单位的字符串类型作为该属性的值(px、rpx、em、rem、%、vw、vh等)

<gu-icon name="quick-fill" size="1.5em" />

设置图标颜色与背景颜色

可以通过 color、bg-color 属性分别设置图标的颜色和背景颜色，这里对内置色彩属性有个 “语法糖” ，可以直接输入色彩变量而不用var(--)，具体参考以下示例

<gu-icon name="success" color="gu-success" bg-color="gu-primary-light" />

当然也可以输入普通的css颜色值:

<gu-icon name="add" color="#fff" bg-color="rgb(0,0,0)" />

设置图标圆角 / 使用圆形图标与设置边框

通过将 round 属性设置为true可以使图标拥有圆角；通过将 circle 属性设置为true可以获得一个圆形的图标，并且还可以通过 padding 属性来修改图标周围占有的距离:

<gu-icon name="success" color="white" bg-color="gu-success" round />
<gu-icon name="error" color="white" bg-color="gu-error" circle />

这样将得到如下两个图标：

属性列表

源码一览

<!-- ttml 组件结构 -->
<text class="gu-icon gu-icon-{{name}} {{clickActived?'click-actived':''}}"
    style="font-size:{{tool.cssFormat(size)}};color:{{tool.builtinVarFormat(color)}};background-color:{{tool.builtinVarFormat(bgColor)}};{{bold?'font-weight:bold':''}};padding:{{tool.cssFormat(padding)}};border-radius:{{circle?'1000px':(round?'5px':'')}}"
    tt:if="{{name!==''}}" bindtap="{{showTapEffect?'handleClick':''}}"></text>

<sjs module="tool">
    function isNumber(n) {
        return typeof n === "number";
    }
    function cssFormat(n) {
        if (isNumber(n)) return n + "px";
        else return n.replace(/\d+/g, "") ? n : (n + "px");
    }
    function builtinVarFormat(str) {
        if (str.indexOf("gu") !== 0) return str;
        else return "var(--" + str + ")";
    }
    module.exports = {
        cssFormat: cssFormat,
        builtinVarFormat: builtinVarFormat
    }
</sjs>

// typescript文件
篇幅过长，不宜展示。可以通过下方github链接查看源码

/* ttss样式文件 */
篇幅过长，不宜展示。可以通过下方github链接查看源码

下载

一、Github: https://github.com/lianggaoqiang/g-ui

Git拉取到的默认是项目源码，其中ts文件未编译，若使用typescript开发则可以直接引用，js开发则不能直接使用，这种情况有三种解决方案：

1. 修改项目根目录下的project.config.json文件内的setting.useCompilerPlugins为["typescript"]并重启项目，具体可查看文档：Typescript支持
2. 使用tsc指令编译项目内所有ts文件
3. 使用下方的npm方式下载g-ui

二、npm: https://www.npmjs.com/package/@cellent/g-ui

npm install @cellent/g-ui

1. 对下载下来的g-ui包进行构建，此步骤若不明白，可以查看文档：npm支持：构建npm
2. 在需要使用的页面引入该组件

<!-- page.ttml 引用页面的ttml文件 -->
<gu-icon name="success" color="gu-success" />

{
    "usingComponents": {
        "gu-icon": "ext://@cellent/g-ui/gu-icon"
    }
}