twentythree-icons

1.1.5 • Public • Published

TwentyThree Icons

publish

This is a compilation of icons to be used as part of the TwentyThree design and brand guidelines.

Installation

npm install --save @23/icons

Usage

As a webcomponent

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="node_modules/@23/tt-icon-activity.js"></script>
    <title>My app</title>
  </head>
  <body>
    <tt-icon-activity></tt-icon-activity>
  </body>
</html>

As a react component

import React from 'react';
import { Activity } from '@23/icons';

function MyApp() {
  return (
    <div>
      <Activity />
    </div>
  );
}

As SVG with Webpack

import iconName from '@23/icons/activity.svg';

As sprite

A <symbol> sprite is also available and can be used referenced in HTML 23-icons-sprite.svg and use it in your DOM.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My app</title>
  </head>
  <body>
    <svg>
      <use xlink:href="@23/icons/23-icons-sprite.svg#activity"></use>
    </svg>
  </body>
</html>

Building

To build bundle in dist with icons and react components.

npm run build

To build static showcase site in static-site

npm run build-static-site

Development

To fetch new icons from Figma. Configuration details are in icons-config.js

npm run fetch-icons

Package Sidebar

Install

npm i twentythree-icons

Weekly Downloads

1

Version

1.1.5

License

MIT

Unpacked Size

1.38 MB

Total Files

494

Last publish

Collaborators

  • noahlaux