TwentyThree Icons
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