agerix/iconify
2
0
Fork 0
mirror of https://github.com/iconify/iconify.git synced 2025-02-14 09:30:21 +00:00
Code Issues Releases Activity

Use id property to generate reliable ids for shapes in React component

Browse Source
This commit is contained in:
Vjacheslav Trushkin 2021-02-06 11:22:51 +02:00
parent 9021dd57eb
commit 2dbc923a29
5 changed files with 56 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
packages/react-demo/src/App.js vendored
View File

@ -48,6 +48,7 @@ addCollection({
height: 24,
});
// Component
class CheckboxIcon extends React.Component {
constructor(props) {
super();
@ -175,8 +176,10 @@ function App() {
/>
</p>
<p>
Testing replacing ids in icons: <Icon icon="noto-robot" />
<Icon icon="noto-robot" hFlip={true} />
Testing replacing ids in icons: <Icon icon="noto-robot" />{' '}
<Icon icon="noto-robot" /> (default handler)
<Icon icon="noto-robot" id="test1" />{' '}
<Icon icon="noto-robot" id="test2" /> (string)
</p>
</section>

4
packages/react/package-lock.json generated
View File

@ -1,12 +1,12 @@
{
"name": "@iconify/react",
"version": "2.0.0-rc.6",
"version": "2.0.0-rc.7",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "@iconify/react",
"version": "2.0.0-rc.6",
"version": "2.0.0-rc.7",
"license": "MIT",
"devDependencies": {
"@babel/preset-env": "^7.12.7",

2
packages/react/package.json
View File

@ -2,7 +2,7 @@
"name": "@iconify/react",
"description": "Iconify icon component for React.",
"author": "Vjacheslav Trushkin",
"version": "2.0.0-rc.6",
"version": "2.0.0-rc.7",
"license": "MIT",
"bugs": "https://github.com/iconify/iconify/issues",
"homepage": "https://iconify.design/",

11
packages/react/src/icon.ts
View File

@ -52,6 +52,9 @@ export interface IconifyIconProps extends IconifyIconCustomisations {
// Shorthand properties
flip?: string;
align?: string;
// Unique id, used as base for ids for shapes. Use it to get consistent ids for server side rendering
id?: string;
}
/**
@ -182,8 +185,14 @@ const component = (
const item = iconToSVG(icon, customisations);
// Add icon stuff
let localCounter = 0;
const id = props.id;
componentProps.dangerouslySetInnerHTML = {
__html: replaceIDs(item.body, 'iconify-react-id-'),
__html: replaceIDs(
item.body,
id ? () => id + '-' + localCounter++ : 'iconify-react-'
),
};
for (let key in item.attributes) {
componentProps[key] = item.attributes[key];

39
packages/react/tests/icon.test.js
View File

@ -185,13 +185,50 @@ describe('Creating component', () => {
});
});
test('replacing id', () => {
test('replacing id (default behavior)', () => {
const component = renderer.create(<Icon icon={iconDataWithID} />);
const tree = component.toJSON();
const body = tree.props.dangerouslySetInnerHTML.__html;
expect(body).not.toStrictEqual(iconDataWithID.body);
});
test('replacing id (custom generator)', () => {
const component = renderer.create(
<Icon icon={iconDataWithID} id="test" />
);
const tree = component.toJSON();
const body = tree.props.dangerouslySetInnerHTML.__html;
// Generate expected body
let expected = iconDataWithID.body;
const replacements = {
'ssvg-id-1st-place-medala': 'test-0',
'ssvg-id-1st-place-medald': 'test-1',
'ssvg-id-1st-place-medalf': 'test-2',
'ssvg-id-1st-place-medalh': 'test-3',
'ssvg-id-1st-place-medalj': 'test-4',
'ssvg-id-1st-place-medalm': 'test-5',
'ssvg-id-1st-place-medalp': 'test-6',
'ssvg-id-1st-place-medalb': 'test-7',
'ssvg-id-1st-place-medalk': 'test-8',
'ssvg-id-1st-place-medalo': 'test-9',
'ssvg-id-1st-place-medalc': 'test-10',
'ssvg-id-1st-place-medale': 'test-11',
'ssvg-id-1st-place-medalg': 'test-12',
'ssvg-id-1st-place-medali': 'test-13',
'ssvg-id-1st-place-medall': 'test-14',
'ssvg-id-1st-place-medaln': 'test-15',
};
Object.keys(replacements).forEach((search) => {
expected = expected.replace(
new RegExp(search, 'g'),
replacements[search]
);
});
expect(body).toStrictEqual(expected);
});
});
describe('Passing attributes', () => {