17 Star 68 Fork 9

江西逐浪软件科技有限公司 / zico

Create your Gitee Account
Explore and code with more than 6 million developers,Free private repositories !:)
Sign up
This repository doesn't specify license. Without author's permission, this code is only for learning and cannot be used for other purposes.
Clone or download
SVG矢量图标输出.html 12.38 KB
Copy Edit Web IDE Raw Blame History
cms发哥 authored 2020-07-12 19:09 . 1.9版全新发布
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="ZoomlaCMS-www.z01.com">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>zico-基于JS输出SVG</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<!--只要引入一行JS就可以输出zico的SVG图标-->
<script src="js/zico.min.js"></script>
<!--以下是网页框架-与zico的svg输出无关-->
<link rel="stylesheet" href="lib/bootstrap.min.css" >
<script src="lib/jquery-3.2.1.min.js" ></script>
<script src="lib/bootstrap.min.js" ></script>
<link href="lib/style.css" rel="stylesheet">
</head>
<body>
<div class="jumbotron text-center bg-warning">
<h1><a href="index.html"><i class="zi zi_home"></i></a> zico 逐浪优秀图标集<small class="text-muted">SVG图标输出引用</small></h1>
</div>
<main class="container">
你只要引用<code>&lt;script src=&quot;js/zico.js&quot; &gt;&lt;/script&gt;</code>就能输出svg形式的icon图标,而且网页写作模式没有任何不同,比如<code>&lt;i class=&quot;zi zi_user&quot;&gt;&lt;/i&gt;</code>,下面是一些例子示意。
</main>
<div class="container-xl">
<i class="zi zi_user"></i> 我的中国心,我的中国ICON图标集,所有的图标与HTML元素完美的结合,并有<i class="zi zi_govRoundFlag zi_6x"></i>等中国元素。
<hr>
<h1>图标体系</h1>
标准图:
<i class="zi zi_user"></i>
<i class="zi zi_menu"></i>
<i class="zi zi_user"></i>
<hr>
&nbsp;&nbsp;90度旋转:
<i class="zi zi_user zi_rotate90"></i><br/>
180度旋转:
<i class="zi zi_user zi_rotate180"></i><br/>
270度旋转:
<i class="zi zi_user zi_rotate270"></i><br/>
<hr>
水平投影:
<i class="zi zi_filePic zi_flipLevel"></i>
<hr>
垂直投影(翻转)
<i class="zi zi_filePic zi_flipVertical"></i>
</div>
<hr>
12种规格
<i class="zi zi_user zi_1x"></i>
<i class="zi zi_user zi_2x"></i>
<i class="zi zi_user zi_3x"></i>
<i class="zi zi_user zi_4x"></i>
<i class="zi zi_user zi_5x"></i>
<i class="zi zi_user zi_6x"></i>
<i class="zi zi_user zi_7x"></i>
<i class="zi zi_user zi_8x"></i>
<i class="zi zi_user zi_9x"></i>
<i class="zi zi_user zi_10x"></i>
<i class="zi zi_user zi_11x"></i>
<i class="zi zi_user zi_12x"></i>
<i class="zi zi_crow zi_10x"></i>
<i class="zi zi_tmWeihaifb zi_2x"></i>
<i class="zi zi_tmYoutube"></i>
<hr>
动作:
<p>
<i class="zi zi_checkcircle zi_zoom" zico="圆打勾"></i>
<i class="zi zi_checkcircle zi_bounce" zico="圆打勾"></i>
<i class="zi zi_checkcircle zi_danger" zico="圆打勾"></i>
<i class="zi zi_checkcircle zi_spin" zico="圆打勾"></i>
<i class="zi zi_checkcircle zi_pulse" zico="圆打勾"></i>
<i class="zi zi_checkcircle zi_load" zico="圆打勾"></i>
</p>
<section class="icoColor">
<div class="container-xl">
<h3>自由定义你的颜色于展现</h3>
<span>极其便利的定义图标颜色 --&gt;</span>
<code>&lt;i class="zi zi_baseballball" zico="棒球" style="color: red"&gt;&lt;/i&gt;</code>
<p>
<i class="zi zi_baseballball" zico="棒球" style="color: red"></i>
<i class="zi zi_baseballball" zico="棒球" style="color:beige"></i>
<i class="zi zi_baseballball" zico="棒球" style="color:aqua"></i>
<i class="zi zi_baseballball" zico="棒球" style="color:blue"></i>
<i class="zi zi_baseballball" zico="棒球" style="color:OrangeRed"></i>
<i class="zi zi_baseballball" zico="棒球" style="color: Magenta"></i>
<i class="zi zi_baseballball" zico="棒球" style="color: DarkGreen"></i>
</p>
</div>
</section>
<section class="zico_list_case">
<div class="container">
<strong>丰富的动作</strong>
<span>弹跳、缩放、警灯、旋转、风车、渐入等各类动作</span>
<div class="zico_list_case_d">
<i class="zi zi_bomb zi_zoom"></i>
<i class="zi zi_smileyFace zi_bounce"></i>
<i class="zi zi_chessking zi_danger"></i>
<i class="zi zi_globe zi_spin" zico="地球"></i>
<i class="zi zi_Pisces zi_pulse" zico="双鱼"></i>
<i class="zi zi_fire zi_load" zico="火苗" ></i>
</div>
</div>
</section>
<section class="zico_list_case2">
<div class="container">
<div class="baoguo"><i class="zi zi_check zi_pull" zico="打勾"></i></div>
<em>“拉开”动作只在加载时显示一次,如要看效果请在当前位置刷新此页面</em>
</div>
</section>
<!--case end-->
<div class="container">
固定宽度列表:<br>
<i class="zi zi_glass zi_w1"></i>zi_w1+++zi_glass<br>
<i class="zi zi_glass zi_w2"></i>zi_w2+++zi_glass<br>
<i class="zi zi_glass zi_w3"></i>zi_w3+++zi_glass<br>
<i class="zi zi_glass zi_w4"></i>zi_w4+++zi_glass<br>
<i class="zi zi_glass zi_w5"></i>zi_w5+++zi_glass<br>
<i class="zi zi_glass zi_w6"></i>zi_w6+++zi_glass<br>
<i class="zi zi_glass zi_w7"></i>zi_w7+++zi_glass<br>
<i class="zi zi_glass zi_w8"></i>zi_w8+++zi_glass<br>
带边框定义:<br>
<i class="zi zi_pathUp zi_border"></i><br><br>
旋转90度、180度、270度:<br>
<i class="zi zi_anchor zi_rotate90"></i>
<i class="zi zi_anchor zi_rotate180"></i>
<i class="zi zi_anchor zi_rotate270"></i><br><br>
标准图标:<i class="zi zi_bomb "></i><br>
水平投影:<i class="zi zi_bomb zi_flipLevel"></i><br>
垂直投影:<i class="zi zi_bomb zi_flipVertical"></i><br><br>
<hr>
默认组合使用:
<span class="zi_group zi_2x">
<i class="zi zi_squareLine zi_group2x"></i>
<i class="zi zi_digg zi_group1x"></i>
</span>
<br><br>
反转颜色组合使用:
<span class="zi_group zi_2x">
<i class="zi zi_circle zi_group2x"></i>
<i class="zi zi_digg zi_group1x zi_inverse"></i>
</span>
<br><br>
自定颜色组合使用:
<span class="zi_group zi_2x">
<i class="zi zi_squareLine zi_group2x"></i>
<i class="zi zi_digg zi_group1x" style="color:Tomato"></i>
</span>
<br><br>
<div style="font-size:19rem;border:1px solid #ccc">
<i class="zi zi_user"></i>
</div>
<div class="zi zi_glass"></div>
<br>
<br>
<br>
<br>
<br>
<i class="zi zi_duilian"></i>
<i class="zi zi_qiao"></i>
<i class="zi zi_gongqiao"></i>
<i class="zi zi_feixing"></i>
<i class="zi zi_xuanfengsan"></i>
<i class="zi zi_shuilongtou"></i>
<i class="zi zi_shuilongtou2"></i>
<i class="zi zi_fengche"></i>
<i class="zi zi_jujia"></i>
<i class="zi zi_baitianjujia"></i>
<i class="zi zi_lijia"></i>
<i class="zi zi_wanshanjujia"></i>
<i class="zi zi_jujiawifi"></i>
<i class="zi zi_kou"></i>
<i class="zi zi_dotKe"></i>
<i class="zi zi_kouzao"></i>
<i class="zi zi_touxiju"></i>
<i class="zi zi_gelijia"></i>
<i class="zi zi_workjia"></i>
<i class="zi zi_feiganrang"></i>
<i class="zi zi_jujliren"></i>
<i class="zi zi_xiaoduye"></i>
<i class="zi zi_qingjiye"></i>
<i class="zi zi_dotteam"></i>
<i class="zi zi_bingdu"></i>
<i class="zi zi_shadu"></i>
<i class="zi zi_xijuGanrang"></i>
<i class="zi zi_user"></i>
<i class="zi zi_tmWeihaifb"></i>
<i class="zi zi_tmAlipay"></i>
<i class="zi zi_tmGitee"></i>
<i class="zi zi_tmVue"></i>
<i class="zi zi_tmPowerShell"></i>
<i class="zi zi_kangfau"></i>
<br>
<i class="zi zi_music"></i>
</div>
<footer>
<div class="container">
<div class="col-md-8 offset-md-2 footLi">
<ul>
<li><strong>关于</strong></li>
<li><a href="http://ico.z01.com/Item/1397.aspx">项目理念</a></li>
<li><a href="http://ico.z01.com/Item/1356.aspx">有何不同</a></li>
<li><a href="http://ico.z01.com/Item/508.aspx">检索方法</a></li>
<li><a href="http://ico.z01.com/Item/1350.aspx">区位标准</a></li>
</ul>
<ul>
<li><strong>使用</strong></li>
<li><a href="http://ico.z01.com/Item/499.aspx">CDN使用</a></li>
<li><a href="http://ico.z01.com/Item/499.aspx">网站目录引用</a></li>
<li><a href="http://ico.z01.com/Item/499.aspx">下载本地使用</a></li>
<li><a href="http://ico.z01.com/Item/1349.aspx">微信小程序引用</a></li>
<li><a href="http://ico.z01.com/Item/1348.aspx" style="font-size: 0.8rem;">结合angular\VUE</a></li>
</ul>
<ul>
<li><strong>支持</strong></li>
<li><a href="http://ico.z01.com/Item/1352.aspx">捐赠我们</a></li>
<li><a href="http://ico.z01.com/Item/1351.aspx">商业订制</a></li>
<li><a href="http://www.ziti163.com/webfont" target="_blank">webfont</a></li>
<li><a href="http://www.ziti163.com/uni" target="_blank">Uni全球区码</a></li>
<li><a href="http://ico.z01.com/Item/1357.aspx">申请新图标</a></li>
</ul>
<ul>
<li><strong>链接</strong></li>
<li><a href="http://www.z01.com" target="_blank">Zoomla!逐浪CMS</a></li>
<li><a href="http://f.ziti163.com" target="_blank">逐浪字库</a></li>
<li><a href="http://code.z01.com/v4" target="_blank">Bootstrap中国站</a></li>
<li><a href="http://code.z01.com/sass" target="_blank">scss/sass文档</a></li>
</ul>
</div>
<div class="Copyright">
<script src="/js/mobile.js"></script><a href="http://app.z01.com/Class_2/NodePage.aspx?url=http://localhost:115/&amp;t=m" style="font-size:30px;" data-toggle="tooltip" data-placement="top" title="" target="_blank" data-original-title="本网站支持手机访问,点此模拟手机并获得访问"><img style="width:15px;" src="data:image/gif;base64,R0lGODlhHQA5AOZfAOnp6WovNf0+AGItMmQrMObk5eQ6A+Y6A+U6A6uNkezq6/f19ufl5vKVd9jP0GUtM+Db3ejm5/z6+/n3+PHv8ODe3+s6At7Z2enQyvc8AOfc2mQtMu47AWguNPLw8WMtMuva1WkuNGIrL+Pg4eHc3cN5YvA7Acq/wot0dtexpqaUl2AvNGAuM8avreLJwaqZnN/Bus2YiO07Atk7CPs9AN07BuE6BOfg4GUsMePJwmQsMWE1Os+djuM6BOfd22A0OOk6AohwcsqRgMtAFLuusNDHyGEtMs4/EaCNj8J2XtDHyWEqLphva2MrMIdYVLGRjoRUUOzn6HA7N2guM39OSmAoK2AoKmIqL6mHhGUsMrCRjXE8OP8+AGsvNf///////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh/wtYTVAgRGF0YVhNUDw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDE0IDc5LjE1Njc5NywgMjAxNC8wOC8yMC0wOTo1MzowMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgV2luZG93cyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo0MjM1RTY5QzE5N0MxMUU1QUM0RUI3MUZGMjEyOUQzNSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo0MjM1RTY5RDE5N0MxMUU1QUM0RUI3MUZGMjEyOUQzNSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjQyMzVFNjlBMTk3QzExRTVBQzRFQjcxRkYyMTI5RDM1IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjQyMzVFNjlCMTk3QzExRTVBQzRFQjcxRkYyMTI5RDM1Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+Af/+/fz7+vn49/b19PPy8fDv7u3s6+rp6Ofm5eTj4uHg397d3Nva2djX1tXU09LR0M/OzczLysnIx8bFxMPCwcC/vr28u7q5uLe2tbSzsrGwr66trKuqqainpqWko6KhoJ+enZybmpmYl5aVlJOSkZCPjo2Mi4qJiIeGhYSDgoGAf359fHt6eXh3dnV0c3JxcG9ubWxramloZ2ZlZGNiYWBfXl1cW1pZWFdWVVRTUlFQT05NTEtKSUhHRkVEQ0JBQD8+PTw7Ojk4NzY1NDMyMTAvLi0sKyopKCcmJSQjIiEgHx4dHBsaGRgXFhUUExIREA8ODQwLCgkIBwYFBAMCAQAAIfkEBWQAXwAsAAAAAB0AOQAAB92AX12DhIWGh4eCiIuMjY6PkJGSk4YJEAmUjCMFEF0OBaAOmYMJJJijqKmqq4derq+wsbKLsrW2tLa5r7i6uby9tb/AscLDu4jGwcjJxMvMx63P0IbS04XVrsXJ2sbcw97A4L3iuuS+ztLmt+jP6srR1e6z7MzyzfDp9Nv63fzf/uEAjkN0AYDBgwgTIrxw6MOAhxAjSpwIsVCAixgzatyYkRWqDis2eDTywsOJHas6IJkQgYKSAao+VFDAgMGCH6pCoJCgYAERkaoeBCmigoXHLg8CPAqgyFHSR18CAQAh+QQFCgBfACwAAAAAAQABAAAHA4BfgQAh+QQFWgBfACwAAAAAHQA5AAAH0YBfXIOEhYaHh4KIi4yNjo+QkZKThg0aDZSMN18aXBhfoBiZgw0+mKOoqaqriaCur7Cxi7G0tbO1uK63ubi7vLS+v7DBwrqIxcDHyMPKy8atzqDEyNPF1cLXv9m827ndvc3R37bhzuPJ0OLly+ey69Tv1vHY89r13Pfe+eDp5vvkh0BE+wLiEBADCBMiRMCw4YGHECEaKCSgosWLGDNeZIUqwwwZHG3w+AJjyKoMQlzl6KHKAqwjqmiUcJXCwioTSVzEqMGRCwcBjwQocvTz0ZdAACH5BAVuAF8ALAAAAAAdADkAAAfKgF9dg4SFhoeHgoiLjI2Oj5CRkpOGCRAJlIwjXxBdDl+gDpmDCSSYo6ipqquJoK6vsLGLsbS1s7W4rre5uLu8tL6/sMHCuojFwMfIw8rLxq3OoMTI08XVwte/2bzbud29zdHftuHO48nQ4uXL57Lr1O/W8djz2vXc99754Onm++SHWkT70uIQgYMIEypcSEBEExGFAkicSLGiRYqsMq664iQKFiurplBx9QRiKh2wqqgKscUVEx2rskjRAmWJRhwBHgVQ5Ajnoy+BAAAh+QQFbgBfACwAAAAAHQA5AAAH0YBfXIOEhYaHh4KIi4yNjo+QkZKThg0aDZSMN18aXBhfoBiZgw0+mKOoqaqriaCur7Cxi7G0tbO1uK63ubi7vLS+v7DBwrqIxcDHyMPKy8atzqDEyNPF1cLXv9m827ndvc3R37bhzuPJ0OLly+ey69Tv1vHY89r13Pfe+eDp5vvkh0BE+wLiEBADCBMiRMCw4YGHECEaKCSgosWLGDNeZIUqwwwZHG3w8ABjyKoMQlzl6KHKAqwjqmiUcJXCwioTSVzEqMGRCwcBjwQocvTz0ZdAADs=" alt=""></a>
Copyright &copy; 2020 Zoomla!CMS. All Rights Reserved 逐浪CMS®软件旗下<a href="http://www.73ic.com" target="_blank">73ic去上</a> 提供云计算服务 <a href="http://ico.z01.com/Item/1353.aspx">[版权申明]</a><br>
<a href="https://opensource.org/licenses/MIT" target="_blank">遵循 MIT 开源协议</a>
</div>
</div>
</footer>
</body>
</html>

Comment ( 0 )

Sign in for post a comment

JavaScript
1
https://gitee.com/zoomla/zico.git
git@gitee.com:zoomla/zico.git
zoomla
zico
zico
master

Search

103611 48b8ff67 1899542 103622 4d02230c 1899542