Implementation

Here you can find general info on how to use Spirit Icons. There is also a README file for each implementation — icons in Web, React Icon, and Twig Icon.

Package

You can find spirit icons in a separate package called `icons`. This package is connected to Supernova using the version release hook. Supernova outputs raw SVGs and we process them. First colors are switched to `currentColor` and then an SVG sprite is generated. Lastly, we generate react components from SVGs.

Install

                                                        
                                                        
                                                            yarn add @lmc-eu/spirit-web
                                                        
                                                            

or

                                                        
                                                        
                                                            npm install --save @lmc-eu/spirit-web
                                                        
                                                            

Web

You can use the SVG sprite for simple HTML implementation. No CSS is needed. Just copy the SVG sprite to your project and load it in the SVG using `<use>`.

                                                        
                                                        
                                                            <svg width="24" height="24" aria-hidden="true">
                                                          <use xlink:href="path/to/sprite.svg#warning" />
                                                        </svg>
                                                        
                                                            

React

React Icon component depends on IconsProvider. Pass icon objects from the package to the Provider and use them to wrap your app or a component. Then you can just pass the name of the icon to the Icon component.

                                                        
                                                        
                                                            import { Icon, IconsProvider } from '@lmc-eu/spirit-web-react/components';
                                                        import icons from '@lmc-eu/spirit-icons/icons';
                                                        
                                                        export default function AppWithIcons(props) {
                                                         return (
                                                          <IconsProvider value={icons}>
                                                           <Icon name="warning" />
                                                          </IconsProvider>
                                                         );
                                                        }
                                                        
                                                            

Twig

For twig implementation, you need to set the correct path in your `config/packages/spirit_web_twig.yml`. Then you can use the Icon component.

                                                        
                                                        
                                                            spirit_web_twig:
                                                          ...
                                                          icons:
                                                            paths:
                                                              - '%kernel.project_dir%/path/to/directory/of/svgs'
                                                        
                                                            

Usage:

                                                        
                                                        
                                                            <Icon name="warning" />
                                                        
                                                            

Using a different icon set

For Web implementation just generate your own sprite, for React create an object with contents of the SVGs and for Twig you just need a folder with all the SVG files.