Add initial project files

2026-09-01 13:03:41 +03:00
parent 22e111bb44
commit 74cb5b6176
1841 changed files with 242819 additions and 30 deletions
@@ -0,0 +1,7 @@
+Open *demo.html* to see a list of all the glyphs in your font along with their codes/ligatures.
+
+To use the generated font in desktop programs, you can install the TTF font. In order to copy the character associated with each icon, refer to the text box at the bottom right corner of each glyph in demo.html. The character inside this text box may be invisible; but it can still be copied. See this guide for more info: https://icomoon.io/docs/#local-fonts
+
+You won't need any of the files located under the *demo-files* directory when including the generated font in your own projects.
+
+You can import *selection.json* back to the IcoMoon app using the *Import Icons* button (or via Main Menu → Manage Projects) to retrieve your icon selection.
@@ -0,0 +1,160 @@
+body {
+  padding: 0;
+  margin: 0;
+  font-family: sans-serif;
+  font-size: 1em;
+  line-height: 1.5;
+  color: #555;
+  background: #fff;
+}
+h1 {
+  font-size: 1.5em;
+  font-weight: normal;
+}
+small {
+  font-size: 0.66666667em;
+}
+a {
+  color: #e74c3c;
+  text-decoration: none;
+}
+a:hover,
+a:focus {
+  box-shadow: 0 1px #e74c3c;
+}
+.bshadow0,
+input {
+  box-shadow: inset 0 -2px #e7e7e7;
+}
+input:hover {
+  box-shadow: inset 0 -2px #ccc;
+}
+input,
+fieldset {
+  font-family: sans-serif;
+  font-size: 1em;
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+input {
+  color: inherit;
+  line-height: 1.5;
+  height: 1.5em;
+  padding: 0.25em 0;
+}
+input:focus {
+  outline: none;
+  box-shadow: inset 0 -2px #449fdb;
+}
+.glyph {
+  font-size: 16px;
+  width: 15em;
+  padding-bottom: 1em;
+  margin-right: 4em;
+  margin-bottom: 1em;
+  float: left;
+  overflow: hidden;
+}
+.liga {
+  width: 80%;
+  width: calc(100% - 2.5em);
+}
+.talign-right {
+  text-align: right;
+}
+.talign-center {
+  text-align: center;
+}
+.bgc1 {
+  background: #f1f1f1;
+}
+.fgc1 {
+  color: #999;
+}
+.fgc0 {
+  color: #000;
+}
+p {
+  margin-top: 1em;
+  margin-bottom: 1em;
+}
+.mvm {
+  margin-top: 0.75em;
+  margin-bottom: 0.75em;
+}
+.mtn {
+  margin-top: 0;
+}
+.mtl,
+.mal {
+  margin-top: 1.5em;
+}
+.mbl,
+.mal {
+  margin-bottom: 1.5em;
+}
+.mal,
+.mhl {
+  margin-left: 1.5em;
+  margin-right: 1.5em;
+}
+.mhmm {
+  margin-left: 1em;
+  margin-right: 1em;
+}
+.mls {
+  margin-left: 0.25em;
+}
+.ptl {
+  padding-top: 1.5em;
+}
+.pbs,
+.pvs {
+  padding-bottom: 0.25em;
+}
+.pvs,
+.pts {
+  padding-top: 0.25em;
+}
+.unit {
+  float: left;
+}
+.unitRight {
+  float: right;
+}
+.size1of2 {
+  width: 50%;
+}
+.size1of1 {
+  width: 100%;
+}
+.clearfix:before,
+.clearfix:after {
+  content: ' ';
+  display: table;
+}
+.clearfix:after {
+  clear: both;
+}
+.hidden-true {
+  display: none;
+}
+.textbox0 {
+  width: 3em;
+  background: #f1f1f1;
+  padding: 0.25em 0.5em;
+  line-height: 1.5;
+  height: 1.5em;
+}
+#testDrive {
+  display: block;
+  padding-top: 24px;
+  line-height: 1.5;
+}
+.fs0 {
+  font-size: 16px;
+}
+.fs1 {
+  font-size: 24px;
+}
@@ -0,0 +1,29 @@
+if (!('boxShadow' in document.body.style)) {
+  document.body.setAttribute('class', 'noBoxShadow');
+}
+
+document.body.addEventListener('click', function (e) {
+  var target = e.target;
+  if (target.tagName === 'INPUT' && target.getAttribute('class').indexOf('liga') === -1) {
+    target.select();
+  }
+});
+
+(function () {
+  var fontSize = document.getElementById('fontSize'),
+    testDrive = document.getElementById('testDrive'),
+    testText = document.getElementById('testText');
+  function updateTest() {
+    testDrive.innerHTML = testText.value || String.fromCharCode(160);
+    if (window.icomoonLiga) {
+      window.icomoonLiga(testDrive);
+    }
+  }
+  function updateSize() {
+    testDrive.style.fontSize = fontSize.value + 'px';
+  }
+  fontSize.addEventListener('change', updateSize, false);
+  testText.addEventListener('input', updateTest, false);
+  testText.addEventListener('change', updateTest, false);
+  updateSize();
+})();
@@ -0,0 +1,7 @@
+Open *demo.html* to see a list of all the glyphs in your font along with their codes/ligatures.
+
+To use the generated font in desktop programs, you can install the TTF font. In order to copy the character associated with each icon, refer to the text box at the bottom right corner of each glyph in demo.html. The character inside this text box may be invisible; but it can still be copied. See this guide for more info: https://icomoon.io/docs/#local-fonts
+
+You won't need any of the files located under the *demo-files* directory when including the generated font in your own projects.
+
+You can import *selection.json* back to the IcoMoon app using the *Import Icons* button (or via Main Menu → Manage Projects) to retrieve your icon selection.
@@ -0,0 +1,160 @@
+body {
+  padding: 0;
+  margin: 0;
+  font-family: sans-serif;
+  font-size: 1em;
+  line-height: 1.5;
+  color: #555;
+  background: #fff;
+}
+h1 {
+  font-size: 1.5em;
+  font-weight: normal;
+}
+small {
+  font-size: 0.66666667em;
+}
+a {
+  color: #e74c3c;
+  text-decoration: none;
+}
+a:hover,
+a:focus {
+  box-shadow: 0 1px #e74c3c;
+}
+.bshadow0,
+input {
+  box-shadow: inset 0 -2px #e7e7e7;
+}
+input:hover {
+  box-shadow: inset 0 -2px #ccc;
+}
+input,
+fieldset {
+  font-family: sans-serif;
+  font-size: 1em;
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+input {
+  color: inherit;
+  line-height: 1.5;
+  height: 1.5em;
+  padding: 0.25em 0;
+}
+input:focus {
+  outline: none;
+  box-shadow: inset 0 -2px #449fdb;
+}
+.glyph {
+  font-size: 16px;
+  width: 15em;
+  padding-bottom: 1em;
+  margin-right: 4em;
+  margin-bottom: 1em;
+  float: left;
+  overflow: hidden;
+}
+.liga {
+  width: 80%;
+  width: calc(100% - 2.5em);
+}
+.talign-right {
+  text-align: right;
+}
+.talign-center {
+  text-align: center;
+}
+.bgc1 {
+  background: #f1f1f1;
+}
+.fgc1 {
+  color: #999;
+}
+.fgc0 {
+  color: #000;
+}
+p {
+  margin-top: 1em;
+  margin-bottom: 1em;
+}
+.mvm {
+  margin-top: 0.75em;
+  margin-bottom: 0.75em;
+}
+.mtn {
+  margin-top: 0;
+}
+.mtl,
+.mal {
+  margin-top: 1.5em;
+}
+.mbl,
+.mal {
+  margin-bottom: 1.5em;
+}
+.mal,
+.mhl {
+  margin-left: 1.5em;
+  margin-right: 1.5em;
+}
+.mhmm {
+  margin-left: 1em;
+  margin-right: 1em;
+}
+.mls {
+  margin-left: 0.25em;
+}
+.ptl {
+  padding-top: 1.5em;
+}
+.pbs,
+.pvs {
+  padding-bottom: 0.25em;
+}
+.pvs,
+.pts {
+  padding-top: 0.25em;
+}
+.unit {
+  float: left;
+}
+.unitRight {
+  float: right;
+}
+.size1of2 {
+  width: 50%;
+}
+.size1of1 {
+  width: 100%;
+}
+.clearfix:before,
+.clearfix:after {
+  content: ' ';
+  display: table;
+}
+.clearfix:after {
+  clear: both;
+}
+.hidden-true {
+  display: none;
+}
+.textbox0 {
+  width: 3em;
+  background: #f1f1f1;
+  padding: 0.25em 0.5em;
+  line-height: 1.5;
+  height: 1.5em;
+}
+#testDrive {
+  display: block;
+  padding-top: 24px;
+  line-height: 1.5;
+}
+.fs0 {
+  font-size: 16px;
+}
+.fs1 {
+  font-size: 24px;
+}
@@ -0,0 +1,29 @@
+if (!('boxShadow' in document.body.style)) {
+  document.body.setAttribute('class', 'noBoxShadow');
+}
+
+document.body.addEventListener('click', function (e) {
+  var target = e.target;
+  if (target.tagName === 'INPUT' && target.getAttribute('class').indexOf('liga') === -1) {
+    target.select();
+  }
+});
+
+(function () {
+  var fontSize = document.getElementById('fontSize'),
+    testDrive = document.getElementById('testDrive'),
+    testText = document.getElementById('testText');
+  function updateTest() {
+    testDrive.innerHTML = testText.value || String.fromCharCode(160);
+    if (window.icomoonLiga) {
+      window.icomoonLiga(testDrive);
+    }
+  }
+  function updateSize() {
+    testDrive.style.fontSize = fontSize.value + 'px';
+  }
+  fontSize.addEventListener('change', updateSize, false);
+  testText.addEventListener('input', updateTest, false);
+  testText.addEventListener('change', updateTest, false);
+  updateSize();
+})();
@@ -0,0 +1,7 @@
+Open *demo.html* to see a list of all the glyphs in your font along with their codes/ligatures.
+
+To use the generated font in desktop programs, you can install the TTF font. In order to copy the character associated with each icon, refer to the text box at the bottom right corner of each glyph in demo.html. The character inside this text box may be invisible; but it can still be copied. See this guide for more info: https://icomoon.io/docs/#local-fonts
+
+You won't need any of the files located under the *demo-files* directory when including the generated font in your own projects.
+
+You can import *selection.json* back to the IcoMoon app using the *Import Icons* button (or via Main Menu → Manage Projects) to retrieve your icon selection.
@@ -0,0 +1,160 @@
+body {
+  padding: 0;
+  margin: 0;
+  font-family: sans-serif;
+  font-size: 1em;
+  line-height: 1.5;
+  color: #555;
+  background: #fff;
+}
+h1 {
+  font-size: 1.5em;
+  font-weight: normal;
+}
+small {
+  font-size: 0.66666667em;
+}
+a {
+  color: #e74c3c;
+  text-decoration: none;
+}
+a:hover,
+a:focus {
+  box-shadow: 0 1px #e74c3c;
+}
+.bshadow0,
+input {
+  box-shadow: inset 0 -2px #e7e7e7;
+}
+input:hover {
+  box-shadow: inset 0 -2px #ccc;
+}
+input,
+fieldset {
+  font-family: sans-serif;
+  font-size: 1em;
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+input {
+  color: inherit;
+  line-height: 1.5;
+  height: 1.5em;
+  padding: 0.25em 0;
+}
+input:focus {
+  outline: none;
+  box-shadow: inset 0 -2px #449fdb;
+}
+.glyph {
+  font-size: 16px;
+  width: 15em;
+  padding-bottom: 1em;
+  margin-right: 4em;
+  margin-bottom: 1em;
+  float: left;
+  overflow: hidden;
+}
+.liga {
+  width: 80%;
+  width: calc(100% - 2.5em);
+}
+.talign-right {
+  text-align: right;
+}
+.talign-center {
+  text-align: center;
+}
+.bgc1 {
+  background: #f1f1f1;
+}
+.fgc1 {
+  color: #999;
+}
+.fgc0 {
+  color: #000;
+}
+p {
+  margin-top: 1em;
+  margin-bottom: 1em;
+}
+.mvm {
+  margin-top: 0.75em;
+  margin-bottom: 0.75em;
+}
+.mtn {
+  margin-top: 0;
+}
+.mtl,
+.mal {
+  margin-top: 1.5em;
+}
+.mbl,
+.mal {
+  margin-bottom: 1.5em;
+}
+.mal,
+.mhl {
+  margin-left: 1.5em;
+  margin-right: 1.5em;
+}
+.mhmm {
+  margin-left: 1em;
+  margin-right: 1em;
+}
+.mls {
+  margin-left: 0.25em;
+}
+.ptl {
+  padding-top: 1.5em;
+}
+.pbs,
+.pvs {
+  padding-bottom: 0.25em;
+}
+.pvs,
+.pts {
+  padding-top: 0.25em;
+}
+.unit {
+  float: left;
+}
+.unitRight {
+  float: right;
+}
+.size1of2 {
+  width: 50%;
+}
+.size1of1 {
+  width: 100%;
+}
+.clearfix:before,
+.clearfix:after {
+  content: ' ';
+  display: table;
+}
+.clearfix:after {
+  clear: both;
+}
+.hidden-true {
+  display: none;
+}
+.textbox0 {
+  width: 3em;
+  background: #f1f1f1;
+  padding: 0.25em 0.5em;
+  line-height: 1.5;
+  height: 1.5em;
+}
+#testDrive {
+  display: block;
+  padding-top: 24px;
+  line-height: 1.5;
+}
+.fs0 {
+  font-size: 16px;
+}
+.fs1 {
+  font-size: 24px;
+}
@@ -0,0 +1,29 @@
+if (!('boxShadow' in document.body.style)) {
+  document.body.setAttribute('class', 'noBoxShadow');
+}
+
+document.body.addEventListener('click', function (e) {
+  var target = e.target;
+  if (target.tagName === 'INPUT' && target.getAttribute('class').indexOf('liga') === -1) {
+    target.select();
+  }
+});
+
+(function () {
+  var fontSize = document.getElementById('fontSize'),
+    testDrive = document.getElementById('testDrive'),
+    testText = document.getElementById('testText');
+  function updateTest() {
+    testDrive.innerHTML = testText.value || String.fromCharCode(160);
+    if (window.icomoonLiga) {
+      window.icomoonLiga(testDrive);
+    }
+  }
+  function updateSize() {
+    testDrive.style.fontSize = fontSize.value + 'px';
+  }
+  fontSize.addEventListener('change', updateSize, false);
+  testText.addEventListener('input', updateTest, false);
+  testText.addEventListener('change', updateTest, false);
+  updateSize();
+})();
@@ -0,0 +1,43 @@
+/* KeenIcon Size Utilities */
+.ki-xs {
+  font-size: 12px !important;
+  line-height: 1;
+}
+.ki-sm {
+  font-size: 14px !important;
+  line-height: 1;
+}
+.ki-md {
+  font-size: 16px !important;
+  line-height: 1;
+} /* Base size */
+.ki-lg {
+  font-size: 18px !important;
+  line-height: 1;
+}
+.ki-xl {
+  font-size: 20px !important;
+  line-height: 1;
+}
+
+/* Larger Display Sizes */
+.ki-2x {
+  font-size: 24px !important;
+  line-height: 1;
+}
+.ki-3x {
+  font-size: 32px !important;
+  line-height: 1;
+}
+.ki-4x {
+  font-size: 40px !important;
+  line-height: 1;
+}
+.ki-5x {
+  font-size: 48px !important;
+  line-height: 1;
+}
+.ki-6x {
+  font-size: 64px !important;
+  line-height: 1;
+}
@@ -0,0 +1,7 @@
+Open *demo.html* to see a list of all the glyphs in your font along with their codes/ligatures.
+
+To use the generated font in desktop programs, you can install the TTF font. In order to copy the character associated with each icon, refer to the text box at the bottom right corner of each glyph in demo.html. The character inside this text box may be invisible; but it can still be copied. See this guide for more info: https://icomoon.io/docs/#local-fonts
+
+You won't need any of the files located under the *demo-files* directory when including the generated font in your own projects.
+
+You can import *selection.json* back to the IcoMoon app using the *Import Icons* button (or via Main Menu → Manage Projects) to retrieve your icon selection.
@@ -0,0 +1,160 @@
+body {
+  padding: 0;
+  margin: 0;
+  font-family: sans-serif;
+  font-size: 1em;
+  line-height: 1.5;
+  color: #555;
+  background: #fff;
+}
+h1 {
+  font-size: 1.5em;
+  font-weight: normal;
+}
+small {
+  font-size: 0.66666667em;
+}
+a {
+  color: #e74c3c;
+  text-decoration: none;
+}
+a:hover,
+a:focus {
+  box-shadow: 0 1px #e74c3c;
+}
+.bshadow0,
+input {
+  box-shadow: inset 0 -2px #e7e7e7;
+}
+input:hover {
+  box-shadow: inset 0 -2px #ccc;
+}
+input,
+fieldset {
+  font-family: sans-serif;
+  font-size: 1em;
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+input {
+  color: inherit;
+  line-height: 1.5;
+  height: 1.5em;
+  padding: 0.25em 0;
+}
+input:focus {
+  outline: none;
+  box-shadow: inset 0 -2px #449fdb;
+}
+.glyph {
+  font-size: 16px;
+  width: 15em;
+  padding-bottom: 1em;
+  margin-right: 4em;
+  margin-bottom: 1em;
+  float: left;
+  overflow: hidden;
+}
+.liga {
+  width: 80%;
+  width: calc(100% - 2.5em);
+}
+.talign-right {
+  text-align: right;
+}
+.talign-center {
+  text-align: center;
+}
+.bgc1 {
+  background: #f1f1f1;
+}
+.fgc1 {
+  color: #999;
+}
+.fgc0 {
+  color: #000;
+}
+p {
+  margin-top: 1em;
+  margin-bottom: 1em;
+}
+.mvm {
+  margin-top: 0.75em;
+  margin-bottom: 0.75em;
+}
+.mtn {
+  margin-top: 0;
+}
+.mtl,
+.mal {
+  margin-top: 1.5em;
+}
+.mbl,
+.mal {
+  margin-bottom: 1.5em;
+}
+.mal,
+.mhl {
+  margin-left: 1.5em;
+  margin-right: 1.5em;
+}
+.mhmm {
+  margin-left: 1em;
+  margin-right: 1em;
+}
+.mls {
+  margin-left: 0.25em;
+}
+.ptl {
+  padding-top: 1.5em;
+}
+.pbs,
+.pvs {
+  padding-bottom: 0.25em;
+}
+.pvs,
+.pts {
+  padding-top: 0.25em;
+}
+.unit {
+  float: left;
+}
+.unitRight {
+  float: right;
+}
+.size1of2 {
+  width: 50%;
+}
+.size1of1 {
+  width: 100%;
+}
+.clearfix:before,
+.clearfix:after {
+  content: ' ';
+  display: table;
+}
+.clearfix:after {
+  clear: both;
+}
+.hidden-true {
+  display: none;
+}
+.textbox0 {
+  width: 3em;
+  background: #f1f1f1;
+  padding: 0.25em 0.5em;
+  line-height: 1.5;
+  height: 1.5em;
+}
+#testDrive {
+  display: block;
+  padding-top: 24px;
+  line-height: 1.5;
+}
+.fs0 {
+  font-size: 16px;
+}
+.fs1 {
+  font-size: 24px;
+}
@@ -0,0 +1,29 @@
+if (!('boxShadow' in document.body.style)) {
+  document.body.setAttribute('class', 'noBoxShadow');
+}
+
+document.body.addEventListener('click', function (e) {
+  var target = e.target;
+  if (target.tagName === 'INPUT' && target.getAttribute('class').indexOf('liga') === -1) {
+    target.select();
+  }
+});
+
+(function () {
+  var fontSize = document.getElementById('fontSize'),
+    testDrive = document.getElementById('testDrive'),
+    testText = document.getElementById('testText');
+  function updateTest() {
+    testDrive.innerHTML = testText.value || String.fromCharCode(160);
+    if (window.icomoonLiga) {
+      window.icomoonLiga(testDrive);
+    }
+  }
+  function updateSize() {
+    testDrive.style.fontSize = fontSize.value + 'px';
+  }
+  fontSize.addEventListener('change', updateSize, false);
+  testText.addEventListener('input', updateTest, false);
+  testText.addEventListener('change', updateTest, false);
+  updateSize();
+})();
@@ -0,0 +1,6 @@
+@import './duotone/style.css';
+@import './outline/style.css';
+@import './filled/style.css';
+@import './solid/style.css';
+
+@import './sizing.css';
@@ -0,0 +1,2 @@
+export * from './types';
+export * from './keenicon';
@@ -0,0 +1,20 @@
+import { forwardRef } from 'react';
+import type { KeeniconsProps } from './types';
+
+function joinClasses(...args: string[]): string {
+  return args.join(' ');
+}
+
+export const KeenIcon = forwardRef<HTMLElement, KeeniconsProps>((props, ref) => {
+  const { icon, variant = 'filled', className = '', size = 'md', ...rest } = props;
+
+  return (
+    <i
+      ref={ref}
+      {...rest}
+      className={joinClasses(`ki-${variant}`, `ki-${icon}`, `ki-${size}`, className)}
+    />
+  );
+});
+
+KeenIcon.displayName = 'KeenIcon';
@@ -0,0 +1,9 @@
+export type KeeniconVariant = 'duotone' | 'filled' | 'solid' | 'outline';
+export type KeeniconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2x' | '3x' | '4x' | '5x' | '6x';
+
+export interface KeeniconsProps {
+  icon: string;
+  variant?: KeeniconVariant;
+  className?: string;
+  size?: KeeniconSize;
+}