custom icon for vivo new skin

Telefonica · Jun 10, 2024 · ddaf8db · ddaf8db
1 parent d73c219
commit ddaf8db
Showing 1 changed file with 21 additions and 1 deletion.
diff --git a/src/image.tsx b/src/image.tsx
@@ -6,7 +6,7 @@ import {AspectRatioContainer} from './utils/aspect-ratio-support';
 import {getPrefixedDataAttributes} from './utils/dom';
 import {useIsInverseVariant} from './theme-variant-context';
 import {useAriaId, useTheme} from './hooks';
-import {VIVO_SKIN} from './skins/constants';
+import {VIVO_SKIN, VIVO_NEW_SKIN} from './skins/constants';
 import {sprinkles} from './sprinkles.css';
 import * as styles from './image.css';
 import {vars} from './skins/skin-contract.css';
@@ -65,6 +65,26 @@ export const ImageError = React.forwardRef<HTMLDivElement, ImageErrorProps>(
                 {withIcon ? (
                     skinName === VIVO_SKIN ? (
                         <VivoLogo style={{width: '10%', minWidth: 24, maxWidth: 48}} />
+                    ) : skinName === VIVO_NEW_SKIN ? (
+                        // Add the specific icon or logic for "o2" skinName
+                        <svg
+                            viewBox="0 0 24 24"
+                            role="presentation"
+                            style={{width: '10%', minWidth: 24, maxWidth: 48}}
+                        >
+                            <path
+                                d="M5.60044 14.585C5.49637 14.585 5.3983 14.5458 5.32396 14.4744L4.73612 13.9003C4.72555 13.8898 4.71068 13.8837 4.69552 13.8837C4.68037 13.8837 4.66579 13.8895 4.65493 13.9L4.06852 14.4698C3.99418 14.5411 3.89611 14.5806 3.79203 14.5806C3.68796 14.5806 3.59018 14.5411 3.5167 14.4698C3.36545 14.3226 3.36517 14.0833 3.5167 13.9361L4.10454 13.365C4.12656 13.3435 4.12656 13.3087 4.10454 13.2872L3.5167 12.7161C3.36517 12.5689 3.36517 12.3296 3.5167 12.1824C3.59047 12.1111 3.68796 12.0716 3.79203 12.0716C3.89611 12.0716 3.99389 12.1111 4.06737 12.1824L4.65407 12.7525C4.66493 12.763 4.67951 12.7687 4.69467 12.7687C4.70982 12.7687 4.7244 12.763 4.73527 12.7525L5.32511 12.1794C5.39859 12.108 5.49637 12.0686 5.60044 12.0686C5.70451 12.0686 5.80229 12.108 5.87577 12.1794C6.02731 12.3266 6.02731 12.5659 5.87577 12.7131L5.28479 13.2872C5.26278 13.3087 5.26278 13.3435 5.28479 13.365L5.87577 13.9391C6.02674 14.0858 6.02674 14.3256 5.87606 14.4739C5.80258 14.5456 5.70451 14.585 5.60044 14.585Z"
+                                fill={isInverse ? vars.colors.inverse : vars.colors.neutralMedium}
+                            />
+                            <path
+                                d="M13.0142 10.7496C12.953 10.7471 12.8819 10.7471 12.8132 10.7521H12.7598C12.2257 10.7571 10.2337 10.9373 10.2337 13.3694C10.2337 15.8061 12.2431 15.9965 12.7775 16.004H12.8638C12.8913 16.004 12.9193 16.0034 12.9465 16.0026C12.9725 16.0021 12.9979 16.0015 13.0214 16.0015C13.5326 15.9916 15.5677 15.8039 15.5677 13.3818C15.5683 10.9646 13.5357 10.762 13.0142 10.7496ZM13.0042 14.9461L12.8644 14.9485H12.7958C11.3282 14.9262 11.3282 13.7525 11.3282 13.3669C11.3282 12.9837 11.3282 11.8147 12.7729 11.8026H12.8161C12.8747 11.8026 12.9356 11.8026 12.9891 11.8051C14.4773 11.8395 14.4773 13.0011 14.4773 13.3818C14.477 13.7631 14.4761 14.9191 13.0042 14.9461Z"
+                                fill={isInverse ? vars.colors.inverse : vars.colors.neutralMedium}
+                            />
+                            <path
+                                d="M21.9997 17.2968H21.9971V9.45494C21.9971 8.78512 21.7301 8.39233 21.5062 8.17981C21.1062 7.80217 20.6039 7.76579 20.4609 7.75559L20.454 7.75506C20.4397 7.75398 20.4298 7.75324 20.4249 7.75228L15.6707 7.74732L14.9331 6.52152C14.7398 6.20012 14.3813 6 13.9996 6H12.0179C11.6033 6 11.2319 6.22493 11.0487 6.58575L10.4611 7.74732C8.26329 7.74732 6.43945 7.7498 5.96626 7.75228C5.21574 7.75476 4.79373 8.04391 4.56986 8.28372C4.10439 8.79036 4.16043 9.43537 4.16529 9.45274L4.16872 10.7C3.54515 10.7764 3.04937 10.9895 2.69141 11.3373C2.23395 11.7819 2.00208 12.4443 2.00208 13.3063C2.00208 14.1677 2.23395 14.8298 2.69141 15.2741C3.05252 15.6247 3.55372 15.8383 4.18502 15.913L4.18845 17.3119C4.23162 18.723 5.25176 18.9975 5.67148 18.9975L20.4275 19C21.005 19 21.3584 18.7627 21.552 18.5626C22.038 18.0628 22.0048 17.3412 21.9997 17.2968ZM2.78205 13.306C2.78205 12.6444 2.93301 12.1758 3.24408 11.8737C3.55516 11.5713 4.03692 11.4242 4.71739 11.4242H4.72254C5.39786 11.4242 5.87763 11.57 6.1887 11.8704C6.50263 12.1734 6.65474 12.6431 6.65417 13.3063C6.65417 13.9673 6.50292 14.4353 6.19184 14.7374C5.88077 15.0395 5.39844 15.1864 4.71768 15.1864C4.03749 15.1864 3.55544 15.0395 3.24465 14.7374C2.93301 14.435 2.78205 13.967 2.78205 13.306ZM20.7534 17.8428C20.7102 17.8872 20.6287 17.9468 20.4277 17.9514L5.65633 17.949L5.65394 17.9485L5.65244 17.9483L5.64947 17.9479C5.59908 17.9415 5.29865 17.9037 5.27978 17.3015L5.27607 15.9089C5.8782 15.8328 6.36168 15.628 6.71678 15.2959C7.19311 14.8504 7.43471 14.1809 7.43471 13.3057C7.43471 12.4305 7.19311 11.7607 6.71678 11.315C6.35796 10.9793 5.86848 10.7734 5.25805 10.6992L5.25434 9.40064C5.25176 9.39816 5.23918 9.15091 5.38414 8.99296C5.49107 8.87443 5.6895 8.81489 5.97169 8.81269C6.4703 8.80773 8.45667 8.80773 10.8019 8.80773C11.0103 8.80773 11.2016 8.69168 11.2931 8.51113L12.0182 7.05793L13.987 7.05297L14.885 8.54311C14.9817 8.70381 15.1624 8.80497 15.3582 8.80497L20.4355 8.80745C20.438 8.80745 20.6187 8.81737 20.7408 8.93342C20.8503 9.03486 20.9035 9.21017 20.9035 9.45494L20.9061 17.3312C20.9109 17.388 20.8984 17.6921 20.7534 17.8428Z"
+                                fill={isInverse ? vars.colors.inverse : vars.colors.neutralMedium}
+                            />
+                        </svg>
                     ) : (
                         // We cannot use IconImageRegular because we want to avoid the usage of width and height props to allow this icon to be responsive
                         <svg