+ Tests (full module, with API)
+
+ References
+
+ Icons should load 2 seconds after page load
+
+
+
+ Getting reference
+ {
+ const key = 'full-ref1';
+ if (element && element.tagName === 'svg') {
+ toggleTest(key, 'success');
+ } else {
+ toggleTest(key, 'failed');
+ }
+ }}
+ />
+
+
+
+
+ Getting reference for empty icon
+ {
+ // Cannot be called because there is no SVG to render!
+ toggleTest('full-ref-missing', 'failed');
+ }}
+ />
+
+
+
+
+ Getting reference for missing icon with fallback text{' '}
+ {
+ // Cannot be called because there is no SVG to render!
+ toggleTest('full-ref-missing2', 'failed');
+ }}
+ >
+ 😀
+
+
+
+ Style
+
+
+
+ Inline style for icon
+ {
+ const key = 'full-style';
+ if (element && element.tagName === 'svg') {
+ let errors = false;
+
+ // Get style
+ const style = element.style;
+
+ switch (style.color.toLowerCase()) {
+ case 'rgb(23, 105, 170)':
+ case '#1769aa':
+ break;
+
+ default:
+ console.log('Invalid color:', style.color);
+ errors = true;
+ }
+
+ if (style.fontSize !== '24px') {
+ console.log(
+ 'Invalid font-size:',
+ style.fontSize
+ );
+ errors = true;
+ }
+
+ if (style.verticalAlign !== '-0.25em') {
+ console.log(
+ 'Invalid vertical-align:',
+ style.verticalAlign
+ );
+ errors = true;
+ }
+
+ toggleTest(key, !errors);
+ } else {
+ toggleTest(key, 'failed');
+ }
+ }}
+ />
+
+
+
+
+ Green color from attribute:{' '}
+ {
+ const key = 'full-color1';
+ if (element && element.tagName === 'svg') {
+ let errors = false;
+
+ // Get style
+ const style = element.style;
+
+ switch (style.color.toLowerCase()) {
+ case 'rgb(0, 128, 0)':
+ case '#008000':
+ case 'green':
+ break;
+
+ default:
+ console.log('Invalid color:', style.color);
+ errors = true;
+ }
+
+ toggleTest(key, !errors);
+ } else {
+ toggleTest(key, 'failed');
+ }
+ }}
+ />
+
+
+
+
+ Green color from style:{' '}
+ {
+ const key = 'full-color2';
+ if (element && element.tagName === 'svg') {
+ let errors = false;
+
+ // Get style
+ const style = element.style;
+
+ switch (style.color.toLowerCase()) {
+ case 'rgb(0, 128, 0)':
+ case '#008000':
+ case 'green':
+ break;
+
+ default:
+ console.log('Invalid color:', style.color);
+ errors = true;
+ }
+
+ toggleTest(key, !errors);
+ } else {
+ toggleTest(key, 'failed');
+ }
+ }}
+ />
+
+
+
+
+ Green color from attribute (overrides style) + red from style:{' '}
+ {
+ const key = 'full-color3';
+ if (element && element.tagName === 'svg') {
+ let errors = false;
+
+ // Get style
+ const style = element.style;
+
+ switch (style.color.toLowerCase()) {
+ case 'rgb(0, 128, 0)':
+ case '#008000':
+ case 'green':
+ break;
+
+ default:
+ console.log('Invalid color:', style.color);
+ errors = true;
+ }
+
+ toggleTest(key, !errors);
+ } else {
+ toggleTest(key, 'failed');
+ }
+ }}
+ />
+
+
+ );
+}
diff --git a/packages/react/src/iconify.ts b/packages/react/src/iconify.ts
index b705d7b..aaf42c6 100644
--- a/packages/react/src/iconify.ts
+++ b/packages/react/src/iconify.ts
@@ -74,6 +74,7 @@ import type {
// Render SVG
import { render } from './render';
+import { merge } from '@iconify/core/lib/misc/merge';
/**
* Export required types
@@ -292,37 +293,154 @@ if (typeof document !== 'undefined' && typeof window !== 'undefined') {
/**
* Component
*/
-function component(
- props: IconProps,
- inline: boolean,
- ref?: IconRef
-): JSX.Element {
- const icon = props.icon;
+interface InternalIconProps extends IconProps {
+ _ref?: IconRef;
+ _inline: boolean;
+}
- // Check if icon is an object
- if (typeof icon === 'object' && typeof icon.body === 'string') {
- return render(fullIcon(icon), props, inline, ref);
+type IconComponentData = Required