twentythree-icons
v1.1.5
Published
Set of Icons used by TwentyThree available as SVGs and React Components
Downloads
3
Readme
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/iconsUsage
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 buildTo build static showcase site in static-site
npm run build-static-siteDevelopment
To fetch new icons from Figma. Configuration details are in icons-config.js
npm run fetch-icons