@setitheme/icons

Official icon pack for the Seti theme

Usage no npm install needed!

<script type="module">
  import setithemeIcons from 'https://cdn.skypack.dev/@setitheme/icons';
</script>

README

Seti Icons

Codacy Badge License npm (scoped) GitHub issues Dependent repos (via libraries.io), scoped npm package Libraries.io dependency status for latest release, scoped npm package

Usage

The following examples show how to render the default basic html icon in various applications.

Font Files

For all applications, if you are using the included css file & web fonts, it is assumed that you are serving the webfont files from the root of your server. For example: https://setitheme.org/seti-icons/seti-icon.ttf

You can copy these files by running the following from the same level that you hav installed seti icons.

Yarn: yarn seti-icons copy -o path/to/public/dir

NPM: npm run seti-icons copy -o path/to/public/dir

For example:

  • cd my-project
  • yarn seti-icons copy -o public
  • Seti will then copy the following files to my-project/public/:
  • seti-icons/seti-icons.css
  • seti-icons/seti-icons.eot
  • seti-icons/seti-icons.scss
  • seti-icons/seti-icons.ttf
  • seti-icons/seti-icons.woff
  • seti-icons/seti-icons.woff2

Alternatively, you can download a bundle with all assets directly from the website: setitheme.org

Good Ol' Fashioned HTML + CSS

<html>
  <head>
    <!-- Import the CSS file -->
    <link rel="stylesheet" type="text/css" href="/icons/seti-icons.css" />
  </head>
  <body>
    <i className="seti-icon seti-icon-html"></i>
  </body>
</html>

JSX

// Import CSS
import '@setitheme/static/icons/seti-icons.css';

// Use the icon same as in html once css is imported
return <i className="seti-icon seti-icon-html"></i>;

React

import '@setitheme/react';
<SetiIcon icon="react" />;

Vue

<SetiIcon icon="vue" />