10 |
11 |
Icon System
12 |
13 |
Each icon has been built on a square canvas which results in a square viewBox
for example: viewBox="0 0 20 20"
. The width and height attributes are set to 1em
. The fill colour is set to currentColor
. Therefore, we can easily size and style the icons using font/dimension and colour CSS classes.
14 |
15 |
usage: { '' }
16 |
17 |
18 | Examples
19 |
20 | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
21 |
22 |
23 |
24 |
25 | Button Text
26 |
27 |
28 |
29 | Button Text
30 |
31 |
32 |
33 | Button Text
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
54 |
55 |
56 | {
57 | iconTypes.map((icon, idx) => (
58 |
59 | ))
60 | }
61 |
62 |
63 |
64 | );
65 | }
66 | }
67 |
68 | export default App;
69 |
70 | const colors = ['dark-gray', 'mid-gray', 'gray', 'silver', 'light-silver', 'moon-gray', 'dark-red', 'red', 'light-red', 'orange', 'gold', 'yellow', 'purple', 'light-purple', 'dark-pink', 'hot-pink', 'pink', 'light-pink', 'dark-green', 'green', 'light-green', 'navy', 'dark-blue', 'blue', 'light-blue', 'lightest-blue', 'washed-red'];
71 | const l = colors.length;
72 |
73 | function getRandomColor() {
74 | return colors[Math.floor(Math.random() * l)];
75 | }
76 |
--------------------------------------------------------------------------------
/src/App.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import App from './App';
4 |
5 | it('renders without crashing', () => {
6 | const div = document.createElement('div');
7 | ReactDOM.render(