Загрузка last icon - last icon Скачать исходный код

last icon

Загрузка шрифта

2.2.0

Скачать

последний

Последняя библиотека значков, которые вам когда -либо понадобятся.

Ключевые функции:

Загружать как значки SVG или шрифта
При необходимости наборы значков Mix & Match
Принесите свои собственные значки
Исправить иконы
Ленивый загрузите свои значки

Как использовать

Просто включите библиотеку

 < script src =" last-icon.js " > </ script >

Примечание. Рекомендуется определить это как можно раньше, чтобы все значки были разрешены как можно скорее. В противном случае вы можете увидеть задержку до того, как ваши значки будут отображаться. Даже когда вы делаете это, вы все равно можете увидеть очень небольшую задержку, а не значок шрифта или встроенный SVG.

Если у вас все в порядке с немного большей задержкой, вы можете использовать это вместо этого (что будет проигнорировано в браузерах, которые не поддерживают модули):

 <!-- preload helps displaying things as early as possible, doesn't work in firefox and safari -->
< link rel =" modulepreload " href =" last-icon.js " />
< script type =" module " src =" ./last-icon.js " > </ script >

И позвоните в свои значки!

 < l-i name =" star " > </ l-i >
< l-i name =" star " set =" tb " > </ l-i >
< l-i name =" star " size =" 32 " set =" tb " > </ l-i >

< l-i name =" star " set =" bx " type =" solid " > </ l-i >
< l-i name =" star " set =" bx " type =" regular " > </ l-i >
< l-i name =" github " set =" bx " type =" logos " > </ l-i >

Рекомендуется следующий CSS:

 l-i {
  --size : 1 em ;
  display : inline-flex;
  width : var ( --size );
  height : var ( --size );
  vertical-align : middle;
}
l-i svg {
  display : block;
  width : 100 % ;
  height : 100 % ;
}
p l-i ,
button l-i ,
a l-i ,
span l-i {
  vertical-align : -0.125 em ;
}

Настройка

Вы можете установить любые параметры, используя LastIcon.configure . Рекомендуемый способ назвать это таким образом:

 customElements . whenDefined ( "l-i" ) . then ( ( ) => {
  // Access through registry
  customElements . get ( "l-i" ) . configure ( {
    debug : true ,
    // Transform stars to trash
    // replaceName: {
    //   star: "trash"
    // },
    // Use font icon
    // fonts: [
    //   "material",
    //   "phosphor",
    // ],
    // Change default set
    defaultSet : "tabler" ,
    // Change default stroke
    // defaultStroke: 1,
  } ) ;
} ) ;

Все доступные варианты:

Имя	Тип	Описание
отлаживать	`Boolean`	Должны ли мы выводить сообщения в консоли
ленивый	`Boolean`	Загрузите значки лениво
замены	`Object`	Прозрачно заменить значки на другие значения
шрифты	`Array`	Наборы значков с использованием значков шрифтов, а не SVG
Дефолте	`String`	Набор значков по умолчанию
наборы	`Object.<string, IconSet>`	Доступные иконеты

Поддерживаемые наборы значков

Набор значков	Имя	Псевдоним	Типы	Гладить	Считать	Веб -сайт
Иконки начальной загрузки	начальная загрузка	BS	1	х	1800+	начальная загрузка
Флаги	флаги	Флорида	1	х	?	флаги
Fontawesome	Fontawesome	фанат	5	х	1600+	Fontawesome
Иконоар	иконоар	в	1	х	1600+	иконоар
Iconpark	Iconpark	IP	4	V.	2400+	Iconpark
Люцид	Люцид	Лу	1	V.	1800+	Люцид
Материалы значков	материал	мио	5	х	1100+	Материальные значки
Фосфор	фосфор	pH	6	х	9000+	фосфор
Супер крошечные иконы	супертайн	ул	1	х	386	супертайн
Материалы символы	символы	РС	3	V.	2500+	Материальные символы
Значки таблеток	таблетка	тип	1	V.	5700+	таблетка

Добавление или обновление набора значков

Вы можете обновить любую опцию для набора значков

Имя	Тип	Описание
псевдоним	`String`	Короткие два буквы псевдоним
Svgpath	`function`	Путь SVG
[fixFill]	`Boolean`	Нужно ли это исправить `fill:currentColor` ?
[usestroke]	`String`	Добавить инсульт в SVG
[DefaultStroke]	`String`	Использование по умолчанию (если поддерживает ход)
[DefaultType]	`String`	Тип по умолчанию для использования (когда есть несколько типов)
[префиксы]	`Object.<string, string>`	Типы для префиксов
[fontclass]	`function`	Класс шрифтов
[OpticalFont]	`Boolean`	Оптический шрифт?
[имя]	`String`	Полное имя (впрыскивается автоматически)

Наполнять

Некоторые наборы значков включают в себя по умолчанию fill="currentColor" , а некоторые нет. Для того, чтобы все наборы значков ведут себя последовательно, мы применяем fill="currentColor" ко всем наборам значков. Это исправление применимо: «Материал», «Fontawesome».

Почему пользовательский элемент

Внешний спрайт или шрифт загружают все значки, которые приводят к дополнительному времени нагрузки
Включение SVG приводит к действительно очень длинному HTML и не очень дружелюбному для разработчиков
Нет необходимости в пользовательском JS Inliner, он чувствует себя более чище

Почему внешние CSS

Пользовательский элемент CSS не загружается до тех пор, пока не будет загружен сам компонент, что может привести к тому, что FOUC и все движется вокруг, когда появляется значок. Решение, которое я обнаружил до сих пор, состоит в том, чтобы применить некоторые глобальные правила CSS, чем известно до загрузки компонента.

Вы можете проверить любые дополнительные SCS, которые могут быть полезны и для вас.

Используя шрифты

Иногда легче использовать шрифт иконы. Действительно, он полностью кэширован браузером и не будет иметь никакого сбоя дисплея. Очевидно, что недостатком является то, что вы должны загрузить весь шрифт, но он кэширован после первой нагрузки. Преимущество использования Lasticon Over обычных значков заключается в том, что позволяет легко переключаться между тем или иным образом.

Прежде всего, загрузите любой соответствующий стиль шрифтов

 < link href =" https://fonts.googleapis.com/icon?family=Material+Icons " rel =" stylesheet " />
< link href =" https://fonts.googleapis.com/icon?family=Material+Icons+Two+Tone " rel =" stylesheet " />
< link href =" https://fonts.googleapis.com/icon?family=Material+Icons+Sharp " rel =" stylesheet " />
< link href =" https://fonts.googleapis.com/icon?family=Material+Icons+Round " rel =" stylesheet " />
< link href =" https://fonts.googleapis.com/icon?family=Material+Icons+Outlined " rel =" stylesheet " />

А после этого используйте конфигурацию шрифта, чтобы сообщить о последнем значке для использования шрифта над значками SVG

 customElements . whenDefined ( "l-i" ) . then ( ( ) => {
  // Access through registry
  customElements . get ( "l-i" ) . configure ( {
    debug : true ,
    fonts : [ "material" ] ,
    material : {
      defaultType : "two-tone" ,
    } ,
  } ) ;
} ) ;

А потом обновите свои стили:

 l-i {
  --size : 1 em ;
  display : inline-flex;
  width : var ( --size );
  height : var ( --size );
  vertical-align : middle;

  svg {
    display : block;
    width : 100 % ;
    height : 100 % ;
  }
  i {
    font-size : var ( --size ) !important ;
    color : currentColor;
  }
}
p ,
button ,
a ,
span {
  l-i {
    vertical-align : -0.125 em ;
  }
}

. material-icons-two-tone {
  background-color : currentColor;
  -webkit-background-clip : text;
  -webkit-text-fill-color : transparent;
}