Sketch-icons

Sketch icons `v0.1.13`

Usage

Sketch icons is a completely open-source icon set with 300+ icons that makes it easy for individuals to utilise icons. The Sketch-icons Web Component is a simple and effective way to incorporate Sketch icons into your app. The component will dynamically load an SVG for each icon, ensuring that your app only requests the icons it requires.

yarn : 1.22.17npm : 6.14.16license : MIT

Installation

For those who use the npm or yarn package managers, the Sketch icon packages make it simple to keep your project up to date with the latest icons and improvements.


        npm i sketch-icons
        or
        yarn add sketch-icons

Example


      import { PlayFill } from "sketch-icons";

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


     import { GitHubColor } from "sketch-icons";

      class Icons extends React.Component {
        render() {
          return (
            <h2>
              I am a <GitHubColor /> contributor />
            </h2>
          );
        }
      }

Using CDN

If you want to use the icons in your project, you can use the CDN. Add the following cdn to your HTML file.


    <link rel="stylesheet" type="text/css" href="https://unpkg.com/sketch-icons@0.1.13/dist/cdn/icons.css" />

Note

You can also download the CDN and use it in your own projects.

Example

To utilize the pre-built icon from the sketch icons bundle, populate the class property on the i tag


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

Using CSS Selector

You can change the properties of icon using the css selector. The selector is .sk- followed by the icon name.


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

Size

You can use the height and width attributes for our pre-defined icon sizes to specify the icon height and width .


        import { ArrowUpCircle } from "sketch-icons";

        class Icons extends React.Component {
          render() {
            return (
              <h2>
                Go Up <ArrowUpCircle height={100} width={100} />
              </h2>
            );
          }
        }

Color

You can utilise the color attribute for our pre-defined icon color to specify the icon color.


        import { ArrowDown } from "sketch-icons";

        class Icons extends React.Component {
        render() {
            return (
            <h2>
                Move Down <ArrowDown color="#ffffff" />
            </h2>
            );
        }
        }

Note

Only simple icons will have access to the color property.

Stroke

You can utilise the stroke attribute for our pre-defined icon stroke to determine the icon stroke.


        import { ArrowDown } from "sketch-icons";

        class Icons extends React.Component {
          render() {
            return (
              <h2>
                Move Down <ArrowDown stroke="blue" />
              </h2>
            );
          }
        }

Stroke Width

You can use the strokeWidth attribute for our pre-defined icon strokeWidth to specify the icon strokeWidth . Lorem ipsum isplaceholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.


        import { ArrowDown } from "sketch-icons";

        class Icons extends React.Component {
          render() {
            return (
              <h2> 
                Move Down <ArrowDown strokeWidth="0.1" />
              </h2>
            );
          }
        }

Issues

Have you discovered any problems? Please report your Issues here. We will be delighted to learn this.

Contributing

Refer to the Contribution for more information.

Code of Conduct

Refer to the Code of Conduct for more information.

Edit this Document

To make changes to this document, go to the Docs.

License

Sketch icons

v0.1.13

Proudly built with ❤️ in India