webnovel-icons
v0.4.1
Published
Icon automation workflow with Figma
Downloads
9
Maintainers
Readme
Icon Automation Workflow Using Figma
It's a repository for Figma Icon Automation Plugin.
in react
import { ISmile } from "webnovel-icons";
function App(){
return (<svg {...ISmile} width="16" height="16" />);
};
in nunjucks
{% from "node_modules/webnovel-icons/dist/Svgs.njk" import SvgSpirit, Svg, ISmile, ISmileOutlined %}
<body>
{# 动态 创建 SVG 精灵, 这里不能有引号 #}
{# Api ([], class='', attrs='') #}
{{ SvgSpirit([ISmile, ISmileOutlined]) }}
{# 或者你也可以添加自定义的 symbol #}
{% call Symbols([ISmile, ISmileOutlined]) -%}
<symbol id="ICustomSvg" viewBox="0 0 24 24"><path d="M22 18V8h-6V2h-4l-6 8v12h12a4 4 0 004-4zM4 10H2v12h2V10z" fill="#000"></path></symbol>
{%- endcall %}
{# 使用 SVG 精灵, 这里需要有引号 #}
{# Api (id='', size='16', class='', attr='' ) #}
<p>{{ Svg('ISmile') }} 16px smile Icon</p>
<p>{{ Svg('ISmileOutlined', 24) }} 24px smile Icon</p>
<p>{{ Svg('ICustomSvg', 24) }} 24px 自定义图标</p>
</body>
如果不想要 SVG 精灵,而是直接输出 SVG 原始 html 字符串可以这样使用。
{% from "node_modules/webnovel-icons/dist/Svgs.njk" import ISmile, ISmileOutlined %}
<body>
{# Api (size='16', class='', attr='' ) #}
<p>{{ ISmile() }} 16px smile Icon</p>
<p>{{ ISmileOutlined(24) }}> 24px smile Icon</p>
</body>
in react native
使用 webnovel-icons/dist/icons.json
搭配 react-native-svg 使用
开始 / start
Open Figma
you need have the acccess to view this figma url
安装 Figma 插件 / Install figma plugin
点击链接下载插件。
配置 / settings
- GitHub Repo Url:
https://github.com/yued-fe/webnovel-icons
- GitHub token:联系 ziven27 获取
- 打开 Figma 并呼起
figma-icon-automation
插件。 - 填写 GitHub Repo Url 也就是当前 Github 地址。
- 填写 GitHub Token.
发布 / Publish
- 点击 Update 按钮,跳转到 Publish 页卡。
- 一定要等到出现黑色加粗文字
The current version is *.*.*
。 - 然后填写想要发布的新的版本号,和修改信息,并点击
push to Github
。
合并分支 / Pull requests
- 点击
here
- 再点击
Squash and merge
。
查看效果 / Preview
然后点击以上链接,并在 Dependencies 中升级 webnovel-icons 到刚刚 Figma 中发布的版本,即可看到效果。