스케치 아이콘을 사용하면 아이콘을 쉽게 가져올 수 있습니다.

5586 단어 iconssketch
스케치 아이콘은 개인이 아이콘을 쉽게 활용할 수 있도록 600개 이상의 아이콘이 포함된 완전 오픈 소스 아이콘입니다. Sketch-icons 웹 구성 요소는 Sketch 아이콘을 앱에 통합하는 간단하고 효과적인 방법입니다. 구성 요소는 각 아이콘에 대해 SVG를 동적으로 로드하여 앱이 필요한 아이콘만 요청하도록 합니다.

홈페이지 : https://sketch-icons.netlify.app/

설치




npm i sketch-icons
# or
yarn add sketch-icons


용법




import { PlayFill } from "sketch-icons";

class Icons extends React.Component {
  render() {
    return (
      <h2>
        Here's a <PlayFill />
      </h2>
    );
  }
}


CDN 사용



프로젝트에서 아이콘을 사용하려면 CDN을 사용할 수 있습니다. HTML 파일에 다음 cdn을 추가합니다.

<link
  rel="stylesheet"
  type="text/css"
  href="https://unpkg.com/[email protected]/dist/cdn/icons.css"
/>


예시



스케치 아이콘 번들에서 미리 만들어진 아이콘을 활용하려면 class 태그에 i 속성을 채웁니다.

<head>
  ...
  <link
    rel="stylesheet"
    type="text/css"
    href="https://unpkg.com/[email protected]/dist/cdn/icons.css"
  />
  ...
</head>
<body>
  ...
  <i class="sk sk-alarm-fill"></i>
  ...
</body>


CSS 선택기 사용



CSS 선택기를 사용하여 아이콘의 속성을 변경할 수 있습니다. 선택기는 .sk- 다음에 아이콘 이름이 옵니다.

.sk-alarm-fill {
  color: red;
  font-size: 35px;
}


속성




재산
기인하다
기본


색깔color="color"#2A2238
height={height}32
너비width={width}32
뇌졸중stroke="stroke-color"#2A2238
스트로크 너비strokeWidth="stroke-width"1.5


import { ArrowUpCircle, ArrowDown } from "sketch-icons";

class Icons extends React.Component {
  render() {
    return (
      <h2>
        Go Up <ArrowUpCircle height={100} width={100} />
        Move Down <ArrowDown stroke="blue" strokeWidth="0.1" color="#ffffff" />
      </h2>
    );
  }
}


아이콘



모두 보려면 여기를 클릭하십시오 sketch-icons

좋은 웹페이지 즐겨찾기