Skip to content

Commit d83a35e

Browse files
daniellerouxdanielleroux
authored
fix: handle encoded URI strings (#81)
1 parent cf0bb66 commit d83a35e

File tree

4 files changed

+21
-1
lines changed

4 files changed

+21
-1
lines changed

‎.changeset/hungry-weeks-return.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@siemens/ix-icons': patch
3+
---
4+
5+
**ix-icon** component can now handle encoded URI strings

‎src/components/icon/parser.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ export function parseSVGDataContent(content: string, element?: HTMLElement): str
1717
parser = new window['DOMParser']();
1818
}
1919

20-
const svgDocument = parser.parseFromString(content, 'text/html');
20+
const svgDocument = parser.parseFromString(decodeURI(content), 'text/html');
2121
const svgElement = svgDocument.querySelector('svg') as HTMLElement;
2222

2323
if (!svgElement) {

‎src/components/icon/test/resolveIcon.spec.ts‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -135,3 +135,14 @@ test('add icons', async () => {
135135
expect(cacheMap.has('starFilled')).toBeTruthy();
136136
expect(cacheMap.has('star-filled')).toBeTruthy();
137137
});
138+
139+
test('handle encoded URI data', async () => {
140+
const element = document.createElement('ix-icon');
141+
const svg = `data:image/svg+xml,%3csvg%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M21.0953%203V4.755H19.4973L21.9583%2011.3026L22%2011.5321V11.5725C22%2013.4726%2020.4556%2015.015%2018.5478%2015.015C16.7035%2015.015%2015.199%2013.5737%2015.1007%2011.7609L15.1001%2011.7488L15.0945%2011.5381L15.1374%2011.3026L17.5983%204.755H13.3814V16.68H19.3811V21H5.61999V16.68H11.6196V4.755H7.40276L9.86373%2011.3026L9.90546%2011.5321V11.5725C9.90546%2013.4726%208.36104%2015.015%206.45327%2015.015C4.60898%2015.015%203.10445%2013.5737%203.00619%2011.7609L3.00553%2011.7488L3%2011.5381L3.04282%2011.3026L5.50379%204.755H3.9058V3H21.0953ZM7.38179%2019.245H17.6193V18.435H7.38179V19.245ZM5.00926%2012.4504H7.89736C7.60139%2012.9344%207.06803%2013.2576%206.46017%2013.26L6.34174%2013.2562L6.22565%2013.2449C5.71119%2013.1759%205.26891%2012.8749%205.00926%2012.4504ZM17.1038%2012.4504C17.3635%2012.8749%2017.8057%2013.1759%2018.3202%2013.2449L18.4363%2013.2562L18.5547%2013.26C19.1626%2013.2576%2019.6959%2012.9344%2019.9919%2012.4504H17.1038ZM18.5478%207.23449L17.2467%2010.695H19.849L18.5478%207.23449ZM6.45327%207.2345L7.75443%2010.695H5.15212L6.45327%207.2345Z'%20fill='white'/%3e%3c/svg%3e`;
142+
const icon = await resolveIcon(element, svg);
143+
144+
expect(icon).toBeDefined();
145+
expect(icon).toBe(
146+
`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M21.0953 3V4.755H19.4973L21.9583 11.3026L22 11.5321V11.5725C22 13.4726 20.4556 15.015 18.5478 15.015C16.7035 15.015 15.199 13.5737 15.1007 11.7609L15.1001 11.7488L15.0945 11.5381L15.1374 11.3026L17.5983 4.755H13.3814V16.68H19.3811V21H5.61999V16.68H11.6196V4.755H7.40276L9.86373 11.3026L9.90546 11.5321V11.5725C9.90546 13.4726 8.36104 15.015 6.45327 15.015C4.60898 15.015 3.10445 13.5737 3.00619 11.7609L3.00553 11.7488L3 11.5381L3.04282 11.3026L5.50379 4.755H3.9058V3H21.0953ZM7.38179 19.245H17.6193V18.435H7.38179V19.245ZM5.00926 12.4504H7.89736C7.60139 12.9344 7.06803 13.2576 6.46017 13.26L6.34174 13.2562L6.22565 13.2449C5.71119 13.1759 5.26891 12.8749 5.00926 12.4504ZM17.1038 12.4504C17.3635 12.8749 17.8057 13.1759 18.3202 13.2449L18.4363 13.2562L18.5547 13.26C19.1626 13.2576 19.6959 12.9344 19.9919 12.4504H17.1038ZM18.5478 7.23449L17.2467 10.695H19.849L18.5478 7.23449ZM6.45327 7.2345L7.75443 10.695H5.15212L6.45327 7.2345Z" fill="white"></path></svg>`,
147+
);
148+
});

‎src/index.html‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,10 @@
2020
<ix-icon
2121
name="data:image/svg+xml;utf8,<?xml version='1.0' encoding='UTF-8'?><svg width='512px' height='512px' viewBox='0 0 512 512' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><title>rocket</title><g id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'><g id='icon' transform='translate(42.666667, 64.000000)'><path d='M405.333333,1.42108547e-14 C396.316305,122.794806 364.316305,211.683695 309.333333,266.666667 C299.582265,276.417735 288.905446,285.33185 277.302879,293.409011 L277.302464,341.234872 L213.302464,405.234872 L174.248,336.891 L68.525,231.157 L7.10542736e-15,192 L64,128 L112.079613,128.000404 C120.083859,116.387258 128.94621,105.720457 138.666667,96 C193.649638,41.0170286 282.538527,9.01702859 405.333333,1.42108547e-14 Z M357.333333,47.9786667 L348.203556,49.3631108 C266.32942,62.2476147 206.763982,88.2424635 168.836556,126.169889 C146.004433,149.002012 128.637057,178.732412 116.876114,215.881246 L116.096,218.389333 L187.584,289.877333 L191.120585,288.76541 C224.531258,277.548675 251.975141,261.807487 273.818948,241.632769 L279.163444,236.496777 C317.09087,198.569351 343.085719,139.003914 355.970222,57.1297769 L357.333333,47.9786667 Z M75.9901363,269.368015 L30.7353023,314.622849 L0.565412939,284.452959 L45.8202469,239.198125 L75.9901363,269.368015 Z M121.24497,314.622849 L45.8202469,390.047572 L15.6503576,359.877683 L91.0750809,284.452959 L121.24497,314.622849 Z M136.329915,329.707793 L166.499804,359.877683 L121.24497,405.132517 L91.0750809,374.962627 L136.329915,329.707793 Z M245.333333,128 C263.006445,128 277.333333,142.326888 277.333333,160 C277.333333,177.673112 263.006445,192 245.333333,192 C227.660221,192 213.333333,177.673112 213.333333,160 C213.333333,142.326888 227.660221,128 245.333333,128 Z' id='Combined-Shape'/></g></g></svg>"
2222
></ix-icon>
23+
ok encoded uri
24+
<ix-icon
25+
name="data:image/svg+xml,%3csvg%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M21.0953%203V4.755H19.4973L21.9583%2011.3026L22%2011.5321V11.5725C22%2013.4726%2020.4556%2015.015%2018.5478%2015.015C16.7035%2015.015%2015.199%2013.5737%2015.1007%2011.7609L15.1001%2011.7488L15.0945%2011.5381L15.1374%2011.3026L17.5983%204.755H13.3814V16.68H19.3811V21H5.61999V16.68H11.6196V4.755H7.40276L9.86373%2011.3026L9.90546%2011.5321V11.5725C9.90546%2013.4726%208.36104%2015.015%206.45327%2015.015C4.60898%2015.015%203.10445%2013.5737%203.00619%2011.7609L3.00553%2011.7488L3%2011.5381L3.04282%2011.3026L5.50379%204.755H3.9058V3H21.0953ZM7.38179%2019.245H17.6193V18.435H7.38179V19.245ZM5.00926%2012.4504H7.89736C7.60139%2012.9344%207.06803%2013.2576%206.46017%2013.26L6.34174%2013.2562L6.22565%2013.2449C5.71119%2013.1759%205.26891%2012.8749%205.00926%2012.4504ZM17.1038%2012.4504C17.3635%2012.8749%2017.8057%2013.1759%2018.3202%2013.2449L18.4363%2013.2562L18.5547%2013.26C19.1626%2013.2576%2019.6959%2012.9344%2019.9919%2012.4504H17.1038ZM18.5478%207.23449L17.2467%2010.695H19.849L18.5478%207.23449ZM6.45327%207.2345L7.75443%2010.695H5.15212L6.45327%207.2345Z'%20fill='white'/%3e%3c/svg%3e"
26+
></ix-icon>
2327
ok append
2428
<script>
2529
const icon = document.createElement('ix-icon');

0 commit comments

Comments
 (0)