f3c5ed91c9d30f592a0187cdf7626b98672295fb

Committed 10 Jun 2025 07:59AM UTC coverage: 52.786% (-0.2%) from 53.028%

Build # f3c5ed91c9d30f592a0187cdf7626b98672295fb

Build Type

push

github

Committed by YoastBot

Commit Message

Bump version to 25.3 on free

Run Details

8175 of 14238 branches covered (57.42%)

Branch coverage included in aggregate %.

29687 of 57490 relevant lines covered (51.64%)

41528.99 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

10.0

/packages/helpers/src/createSvgIconComponent.js

/* External dependencies */
import PropTypes from "prop-types";
import React from "react";
import styled from "styled-components";
import { isArray } from "lodash";

/**
 * Styled SVG Component.
 *
 * @param {Object} props The component's props.
 *
 * @returns {React.Element} StyledSvg component.
 */
export const StyledSvg = styled.svg`
        width: ${ props => props.size };
        height: ${ props => props.size };
        flex: none;
`;

/**
 * Returns the SvgIconSet component.
 *
 * @param {object} props Component props.
 *
 * @returns {React.Element} SvgIconSet component.
 */
class SvgIconSet extends React.Component {
        /**
         * Renders an SVG icon.
         *
         * @returns {React.Element|null} The rendered SVG icon.
         */
        render() {
                const { iconSet, icon, className, color, size } = this.props;
                const iconName = iconSet[ icon ];

                if ( ! iconName ) {
                        console.warn( `Invalid icon name ("${ icon }") passed to the SvgIcon component.` );
                        return null;
                }

                const path = iconName.path;
                const viewbox = iconName.viewbox;

                const iconClass = [ "yoast-svg-icon", "yoast-svg-icon-" + icon, className ].filter( Boolean ).join( " " );
                const ComponentToUse = iconName.CustomComponent ? iconName.CustomComponent : StyledSvg;

                return (
                        <ComponentToUse
                                aria-hidden={ true }
                                role="img"
                                focusable="false"
                                size={ size }
                                className={ iconClass }
                                xmlns="http://www.w3.org/2000/svg"
                                viewBox={ viewbox }
                                fill={ color }
                        >
                                { isArray( path ) ? path : <path d={ path } /> }
                        </ComponentToUse>
                );
        }
}

SvgIconSet.propTypes = {
        icon: PropTypes.string.isRequired,
        iconSet: PropTypes.object.isRequired,
        color: PropTypes.string,
        size: PropTypes.string,
        className: PropTypes.string,
};

SvgIconSet.defaultProps = {
        size: "16px",
        color: "currentColor",
        className: "",
};

/**
 * Create an SVG Icon component with a custom set of icons.
 *
 * @param {Object} iconSet Set of SVG icons.
 *
 * @returns {React.Component} The SvgIcon component.
 */
export default ( iconSet ) => {
        /**
         * Renders an SVG icon.
         *
         * @param {Object} props The component props.
         * @param {string} props.icon The icon name.
         * @param {string} [props.className=""] The CSS class.
         * @param {string} [props.color="currentColor"] The icon color.
         * @param {string} [props.size="16px"] The icon size.
         *
         * @returns {React.Element} The react element.
         */
        const SvgIcon = ( { icon, className = "", color = "currentColor", size = "16px" } ) => {
                return <SvgIconSet
                        iconSet={ iconSet }
                        icon={ icon }
                        className={ className }
                        color={ color }
                        size={ size }
                />;
        };

        SvgIcon.propTypes = {
                icon: PropTypes.string.isRequired,
                color: PropTypes.string,
                size: PropTypes.string,
                className: PropTypes.string,
        };

        return SvgIcon;
};

1	/* External dependencies */
2	import PropTypes from "prop-types";
3	import React from "react";
4	import styled from "styled-components";
5	import { isArray } from "lodash";
6
7	/**
8	* Styled SVG Component.
9	*
10	* @param {Object} props The component's props.
11	*
12	* @returns {React.Element} StyledSvg component.
13	*/
14	export const StyledSvg = styled.svg`	4✔
15	width: ${ props => props.size };	×
16	height: ${ props => props.size };	×
17	flex: none;
18	`;
19
20	/**
21	* Returns the SvgIconSet component.
22	*
23	* @param {object} props Component props.
24	*
25	* @returns {React.Element} SvgIconSet component.
26	*/
27	class SvgIconSet extends React.Component {
28	/**
29	* Renders an SVG icon.
30	*
31	* @returns {React.Element\|null} The rendered SVG icon.
32	*/
33	render() {
34	const { iconSet, icon, className, color, size } = this.props;	×
35	const iconName = iconSet[ icon ];	×
36
37	if ( ! iconName ) {	×
38	console.warn( `Invalid icon name ("${ icon }") passed to the SvgIcon component.` );	×
39	return null;	×
40	}
41
42	const path = iconName.path;	×
43	const viewbox = iconName.viewbox;	×
44
45	const iconClass = [ "yoast-svg-icon", "yoast-svg-icon-" + icon, className ].filter( Boolean ).join( " " );	×
46	const ComponentToUse = iconName.CustomComponent ? iconName.CustomComponent : StyledSvg;	×
47
48	return (	×
49	<ComponentToUse
50	aria-hidden={ true }
51	role="img"
52	focusable="false"
53	size={ size }
54	className={ iconClass }
55	xmlns="http://www.w3.org/2000/svg"
56	viewBox={ viewbox }
57	fill={ color }
58	>
59	{ isArray( path ) ? path : <path d={ path } /> }	×
60	</ComponentToUse>
61	);
62	}
63	}
64
65	SvgIconSet.propTypes = {	4✔
66	icon: PropTypes.string.isRequired,
67	iconSet: PropTypes.object.isRequired,
68	color: PropTypes.string,
69	size: PropTypes.string,
70	className: PropTypes.string,
71	};
72
73	SvgIconSet.defaultProps = {	4✔
74	size: "16px",
75	color: "currentColor",
76	className: "",
77	};
78
79	/**
80	* Create an SVG Icon component with a custom set of icons.
81	*
82	* @param {Object} iconSet Set of SVG icons.
83	*
84	* @returns {React.Component} The SvgIcon component.
85	*/
86	export default ( iconSet ) => {
87	/**
88	* Renders an SVG icon.
89	*
90	* @param {Object} props The component props.
91	* @param {string} props.icon The icon name.
92	* @param {string} [props.className=""] The CSS class.
93	* @param {string} [props.color="currentColor"] The icon color.
94	* @param {string} [props.size="16px"] The icon size.
95	*
96	* @returns {React.Element} The react element.
97	*/
98	const SvgIcon = ( { icon, className = "", color = "currentColor", size = "16px" } ) => {	×
99	return <SvgIconSet	×
100	iconSet={ iconSet }
101	icon={ icon }
102	className={ className }
103	color={ color }
104	size={ size }
105	/>;
106	};
107
108	SvgIcon.propTypes = {	×
109	icon: PropTypes.string.isRequired,
110	color: PropTypes.string,
111	size: PropTypes.string,
112	className: PropTypes.string,
113	};
114
115	return SvgIcon;	×
116	};

Yoast / wordpress-seo / f3c5ed91c9d30f592a0187cdf7626b98672295fb

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous