Tabler icons Picker图标选择插件

教程分享 > WEB技术 (630) 2024-07-31 09:20:03

依赖说明

tabler icons 3.11.0 （基于webfont模式实现）
fontIconPicker 3.1.1
jquery 3.6.0

实现效果

Tabler icons Picker图标选择插件_图示-91951914c1c9492d8c7684636a8a5ee3.png — 打开选择

Tabler icons Picker图标选择插件_图示-8eb06a723a53401c80cb539757856450.png — 搜索图标

Tabler icons Picker图标选择插件_图示-53edf272eb364604be6a99f98c87c826.png — 获取选中图标样式

tabler-icons 下载

下载地址：https://github.com/tabler/tabler-icons/releases

Tabler icons Picker图标选择插件_图示-bab6d215f59c40b0bde0e44136db521a.png

Tabler icons Picker图标选择插件_图示-80365313de764d8486eb3dd97bc012bb.png

下载解压后，我们用的是webfont里面的东西，其他的可以不看。

Tabler icons Picker图标选择插件_图示-84b8a66115f74e4d8c204a6b0fcfda97.png

打开tabler-icons.html可以找到所有的字体图标样式。

Tabler icons Picker图标选择插件_图示-791406dd9de1437f9b50f8039a699504.png

准备font的json数据

通过循环获取到所有的字体图标样式

html 修改脚本参考

<script type="text/javascript">
 const input = document.querySelector('div.search-bar input')
 const iconContainer = document.querySelector('div.box div.tabler-icons')
 let icons = []
 let ficons= []
 document.querySelectorAll('div.tabler-icon').forEach(icon =>{
     icons.push({
        el: icon,
        name: icon.querySelector('strong').innerHTML
      })
      let cls='ti ti-'+icon.querySelector('strong').innerHTML;
      ficons.push(cls)
 })
 console.log('JSON data:',JSON.stringify(cls))
 input.addEventListener('input', search)
 function search(evt) {
   let searchValue = evt.target.value
   let iconsToShow = searchValue.length ? icons.filter(icon => icon.name.includes(searchValue)) : icons
   iconContainer.innerHTML = ''
   iconsToShow.forEach(icon => iconContainer.appendChild(icon.el))
 }
</script>

修改后打开页面，然后打开console就可以看到。

并将数据放入一个新建的json文件中，如下：

Tabler icons Picker图标选择插件_图示-e1460275bee644709f5d113d932989d0.png

fontIconPicker 组件下载

下载地址

组合实现tabler icons 的图标选择器

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Tabler Icons - version 3.11.0</title>

    <link rel="stylesheet" href="./tabler-icons/tabler-icons.min.css">
    
    
    <!-- styles -->
<!-- base | always include -->
<link rel="stylesheet" type="text/css" href="./fontIconPicker/css/base/jquery.fonticonpicker.min.css">
<link rel="stylesheet" type="text/css" href="./fontIconPicker/css/themes/bootstrap-theme/jquery.fonticonpicker.bootstrap.min.css">

<!-- scripts -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript" src="./fontIconPicker/js/jquery.fonticonpicker.min.js"></script>


</head>
<body>
<div class="container">
    <header class="header">
        <h1>
            Tabler Icons
        </h1>
        <p class="text-muted">version 3.11.0</p>
        <p class="text-muted">请使用代理访问，本地file访问无法读取json数据</p>
    </header>
    <div class="" style="text-align: center;">
        <input type="text" name="search" placeholder="type to search" id="mytext" />
        <button type="button" class="btn" id="btn">获取值</button>
    </div>
</div>
<script type="text/javascript">
    //设定当前选择
    //$picker.setIcon( 'fa fa-arrow-down' );
    //设定组件数组
    //$picker.setIcons(['icon-one', 'icon-two']);
  $picker=$('#mytext').fontIconPicker({
       theme: 'fip-bootstrap',
       source:    [],//数据来源
       emptyIcon: true,//允许设置空
       hasSearch: true,//打开搜索
       searchPlaceholder  : '搜索图标',
       iconsPerPage:60,
  });
    
    $.get('./tabler-icons/tabler-icons-fontIconPicker-data.json',{},function(data){
        console.log('data',data);
        $picker.setIcons(data);
    })
    
    $('#btn').click(function(){
        alert($('#mytext').val());
    })
    
</script>
</body>
</html>