Pictogram

Component checklist

Resources

Example

                                                        
                                                        
                                                            import { Pictogram } from '@optimus-web/core';
                                                        
                                                        <Pictogram value="info" />
                                                        
                                                        
                                                            

API

Adding or updating pictograms

We use CSS classes for theming the pictograms and making them reactive to theme changes. As pictograms are SVGs composed with multiple elements, they need different CSS classes to be properly styled. So, after adding the new svg file to the Optimus assets workspace, we must follow the following steps.

First, let’s take a look at the final result of one of this pictograms svg code:

                                                        
                                                        
                                                            <svg viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                            <path class="background path" d="M0 16C0 7.16344 7.16344 0 16 0H45C53.8366 0 61 7.16344 61 16V45C61 53.8366 53.8366 61 45 61H16C7.16344 61 0 53.8366 0 45V16Z" fill="url(#paint0_linear_10310_104)"/>
                                                            <line class="accent info stroke" x1="35.25" y1="52.75" x2="44.75" y2="52.75" stroke="#2272E9" stroke-width="2.5" stroke-linecap="round"/>
                                                            <path class="accent info stroke" d="M40 52.5596L40 35C40 34.4477 39.5523 34 39 34L35.25 34" stroke="#2272E9" stroke-width="2.5" stroke-linecap="round"/>
                                                            <circle class="accent info fill" cx="38.75" cy="26.5" r="2.5" fill="#2272E9"/>
                                                            <path class="outline stroke" d="M71.75 40C71.75 22.465 57.535 8.25 40 8.25C22.465 8.25 8.25 22.465 8.25 40C8.25 57.535 22.465 71.75 40 71.75C53.9699 71.75 65.8325 62.7277 70.0787 50.1922" stroke="#595959" stroke-width="2.5" stroke-linecap="round"/>
                                                            <path d="M71.4889 44.1308C70.9082 48.5601 69.3985 52.7661 67.1262 56.4996" stroke="url(#paint1_linear_10310_104)" stroke-width="2.5" stroke-linecap="round"/>
                                                            <defs>
                                                                <linearGradient id="paint0_linear_10310_104" x1="30.5" y1="25.75" x2="30.5" y2="61" gradientUnits="userSpaceOnUse">
                                                                    <stop class="background stop" stop-color="#F7F7FA"/>
                                                                    <stop class="background stop" offset="1" stop-color="#F7F7FA" stop-opacity="0"/>
                                                                </linearGradient>
                                                                <linearGradient id="paint1_linear_10310_104" x1="72.1935" y1="43.0589" x2="72.402" y2="48.4261" gradientUnits="userSpaceOnUse">
                                                                    <stop class="outline stop" stop-color="white" stop-opacity="0"/>
                                                                    <stop class="outline stop" offset="1" stop-color="#595959"/>
                                                                </linearGradient>
                                                            </defs>
                                                        </svg>
                                                        
                                                            

Please notice:

• Width and height dimensions have been removed from the svg tag (downloaded assets from Figma come with this two attributes defined). Only viewport is needed to properly scale them, as the mentioned dimensions are defined in the stylesheet depending on the component size prop.
• We have 3 elements conforming the background square, one path and two stop elements for the gradient. This three elements must use background class.
• The path also needs path class to hide the element when size is defined as small . Check line 2.
• The stop elements need the stop class. Check lines 10 and 11.
• We have also 3 elements for the dark circle, named outline (may differ in other pictograms, but I hope you get the idea).
• The main element is drawn using a path, it needs outline class and, as the color is defined using stoke property, we must add stroke class. Check line 6
• The end of the outline element has a gradient that shares same color as the previous mentioned element, that’s why we must add outline class to stop elements on lines 14 and 15, and as we did before we should add also stop class
• The rest of elements in the svg are the accented elements, lines 3, 4 and 5. They use the accent class along with the info which applies the info color, and the fill or stroke , depending on which property the element uses for rendering the color.

All pictograms are built this way, with minor differences in the structure depending on the image, but all respond to a similar pattern, it should not be difficult to properly style them following this steps. Check the code or this pull request for further details.