iconfont.html 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport"
  6. content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  7. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8. <title>Tabler Icons - version <%= v %></title>
  9. <link rel="preconnect" href="https://rsms.me/">
  10. <link rel="stylesheet" href="https://rsms.me/inter/inter.css">
  11. <link rel="stylesheet" href="./<%= fileName %>.css">
  12. <style>
  13. * { margin: 0; border: 0; outline: 0; box-sizing: border-box; }
  14. body {
  15. font-family: 'Inter', sans-serif;
  16. background: #fafbfc;
  17. font-size: 1rem;
  18. padding: 1rem;
  19. -webkit-font-smoothing: antialiased;
  20. -moz-osx-font-smoothing: grayscale;
  21. }
  22. code {
  23. font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif;
  24. background: #fafafa;
  25. border: 1px solid #f0f0f0;
  26. color: #666;
  27. padding: 2px 4px;
  28. margin-bottom: 2px;
  29. }
  30. .container {
  31. max-width: 73rem;
  32. margin: 0 auto;
  33. }
  34. .box {
  35. padding: 1rem;
  36. background: #fff;
  37. box-shadow: 0 0 0 1px rgba(0, 0, 0, .05), 0 1px 1px rgba(0, 0, 0, .1);
  38. border-radius: 3px;
  39. border-top-right-radius: 0;
  40. border-top-left-radius: 0;
  41. }
  42. .tabler-icons {
  43. display: flex;
  44. flex-wrap: wrap;
  45. justify-content: space-between;
  46. }
  47. .tabler-icon {
  48. width: 10rem;
  49. font-size: 12px;
  50. text-align: center;
  51. padding: .5rem .25rem 2rem;
  52. }
  53. .tabler-icon i {
  54. display: block;
  55. align-items: center;
  56. font-size: 32px;
  57. height: 1em;
  58. margin-bottom: 1rem;
  59. }
  60. .tabler-icon code {
  61. font-size: 10px;
  62. }
  63. .tabler-icon strong {
  64. display: block;
  65. margin-bottom: .5rem;
  66. font-weight: 600;
  67. }
  68. .tabler-icon-codes {
  69. line-height: 2em;
  70. }
  71. .text-muted {
  72. color: #999;
  73. }
  74. .header {
  75. text-align: center;
  76. margin: 2rem 0 3rem;
  77. }
  78. .search-bar {
  79. padding: 0.75rem 1.5rem;
  80. background: #fff;
  81. box-shadow: 0 0 0 1px rgba(0, 0, 0, .05), 0 1px 1px rgba(0, 0, 0, .1);
  82. border-radius: 3px;
  83. border-bottom-left-radius: 0px;
  84. border-bottom-right-radius: 0px;
  85. }
  86. .search-bar input[name=search] {
  87. padding: 0.5rem;
  88. background: #fafbfc;
  89. box-shadow: 0 0 0 1px rgba(0, 0, 0, .05), 0 1px 1px rgba(0, 0, 0, .1);
  90. width: 100%;
  91. font: inherit;
  92. }
  93. </style>
  94. </head>
  95. <body>
  96. <div class="container">
  97. <header class="header">
  98. <h1>
  99. Tabler Icons
  100. </h1>
  101. <p class="text-muted">version <%= v %></p>
  102. </header>
  103. <div class="search-bar">
  104. <input type="text" name="search" placeholder="type to search" />
  105. </div>
  106. <div class="box">
  107. <div class="tabler-icons">
  108. <% glyphs.forEach(function(glyph) { %>
  109. <div class="tabler-icon">
  110. <i class="ti ti-<%= glyph.name %>"></i>
  111. <strong><%= glyph.name %></strong>
  112. <div class="tabler-icon-codes">
  113. <code>ti ti-<%= glyph.name %></code><br>
  114. <code>\<%= glyph.unicode[0].codePointAt(0).toString(16) %></code>
  115. </div>
  116. </div>
  117. <% }) %>
  118. </div>
  119. </div>
  120. </div>
  121. <script type="text/javascript">
  122. const input = document.querySelector('div.search-bar input')
  123. const iconContainer = document.querySelector('div.box div.tabler-icons')
  124. let icons = []
  125. document.querySelectorAll('div.tabler-icon').forEach(icon => icons.push({
  126. el: icon,
  127. name: icon.querySelector('strong').innerHTML
  128. }))
  129. input.addEventListener('input', search)
  130. function search(evt) {
  131. let searchValue = evt.target.value
  132. let iconsToShow = searchValue.length ? icons.filter(icon => icon.name.includes(searchValue)) : icons
  133. iconContainer.innerHTML = ''
  134. iconsToShow.forEach(icon => iconContainer.appendChild(icon.el))
  135. }
  136. </script>
  137. </body>
  138. </html>