You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+8-17Lines changed: 8 additions & 17 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -19,27 +19,18 @@ You can also create additional sub-components in any existing directory by runni
19
19
You can then modify the component and demo code as needed.
20
20
Your new component can be viewed at `http://localhost:5010/#/components/my-new-component` while the demo server is running.
21
21
22
-
### Running the demo server locally
23
-
24
-
Start up the demo server by running
25
-
```sh
26
-
make dev-server
27
-
```
28
-
29
-
### SVG components
30
-
31
-
* In this repository, we prefer to use SVG React components rather than
32
-
linking to true svg images. In order to convert `.svg` files to React components, the [`svg-to-react-cli` NPM library](https://www.npmjs.com/package/svg-to-react-cli)
33
-
is very useful, but it is not perfect. It doesn't properly handle a few
34
-
attributes, which can be fixed by find-replaces across files. For example:
35
-
*`xmlns:xlink` should be `xmlnsXlink`
36
-
*`stroke-width` should be `strokeWidth`
37
-
38
-
### Adding new Icons
22
+
### Adding new SVGs
39
23
We use SVGs as JSX components for `Icon`s, following this process:
40
24
1. Optimize the svg at [svgomg](https://jakearchibald.github.io/svgomg/)
41
25
2. Make it React compatible with double quotes option at [svg2jsx](http://svg2jsx.herokuapp.com/)
42
26
3. Prefix DOM Ids and classnames with component name if necessary
43
27
4. Add it to the code:
44
28
* Create a new file in `src/Icon/icons/<<NewIcon>>.jsx`
45
29
* Add to `src/Icon/icons/index.jsx` and `src/Icon/Icon.jsx`
0 commit comments