last icon 다운로드 - last icon 소스 코드 다운로드

last icon

글꼴 다운로드

2.2.0

다운로드

최후의

마지막 아이콘 라이브러리가 필요합니다.

주요 기능 :

SVG 또는 글꼴 아이콘으로로드하십시오
필요한 경우 아이콘 세트를 혼합 및 일치시킵니다
나만의 아이콘을 가져 오십시오
아이콘을 수정하십시오
게으른 아이콘을로드하십시오

사용 방법

도서관을 단순히 포함하십시오

 < 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+	부트 스트랩
깃발	깃발	FL	1	엑스	?	깃발
fontawesome	fontawesome	파	5	엑스	1600+	fontawesome
아이코 노르	아이코 노르	~에	1	엑스	1600+	아이코 노르
아이콘 파크	아이콘 파크	IP	4	다섯	2400+	아이콘 파크
루시 사이드	루시 사이드	루	1	다섯	1800+	루시 사이드
재료 아이콘	재료	미	5	엑스	1100+	재료 아이콘
인광 물질	인광 물질	ph	6	엑스	9000+	인광 물질
매우 작은 아이콘	초심	성	1	엑스	386	초심
재료 기호	기호	MS	3	다섯	2500+	재료 기호
타블러 아이콘	타블러	티	1	다섯	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로 이어지고 개발자 친화적이지 않습니다.
Custom JS Inliner가 필요하지 않으면 전반적으로 더 깨끗합니다.

왜 외부 CSS

커스텀 요소 CSS는 구성 요소 자체가로드 될 때까지로드되지 않으므로 아이콘이 나타날 때 Fouc와 물건이 움직일 수 있습니다. 내가 지금까지 찾은 솔루션은 구성 요소가로드되기 전에 알려진 것보다 일부 글로벌 CSS 규칙을 적용하는 것입니다.

당신에게도 유용 할 수있는 추가 SCS를 확인할 수 있습니다.

글꼴 사용

때로는 아이콘 글꼴을 사용하는 것이 더 쉽습니다. 실제로 브라우저에 의해 완전히 캐시되며 디스플레이 글리치가 없습니다. 분명히 단점은 전체 글꼴을로드해야하지만 첫 번째 하중 후에 캐시됩니다. 일반 아이콘을 통해 Lasticon을 사용하는 이점은 한 방향이나 다른 방식으로 쉽게 전환 할 수 있다는 것입니다.

우선, 관련 글꼴 스타일을로드하십시오

 < 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 " />

그 후 글꼴 구성을 사용하여 마지막 아이콘을 알려주십시오.

 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;
}