How to customize 'Give Us Feedback' icon?

Question

How to customize 'Give Us Feedback' icon?

Answer

Primo Studio is used to understand how this procedure is done:

• under Icons tab, choose new icon for the send action, for example.
• download the customization package: You can see that Primo Studio is creating a custom-ui.svg file containing the icon ID & the new icon SVG and puts it into a customization package under img folder.

Perform these actions to change the Report a problem icon:

1. Create a new file named custom-ui.svg and paste the template below which I took from the custom-ui.svg file created by Primo Studio:
   <svg xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink width="24" height="5000" viewBox="0 0 24 5000"></svg>
2. Open https://librarysearch.stir.ac.uk/discovery/custom/44BCU_INST-44BCU_INST/img/icon-report.svg
3. Right-click on the icon > Save As
4. Open the saved file in a text editor and copy the svg field
5. Paste the svg field you copied into the template in custom-ui.svg (pasted text marked in yellow). In addition, add the id of the icon you want to change (marked in green).
   It should look like that:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="5000" viewBox="0 0 24 5000">

<svg id="exclamation-mark" version="1.0" xmlns="http://www.w3.org/2000/svg"
 width="800.000000pt" height="800.000000pt" viewBox="0 0 800.000000 800.000000"
 preserveAspectRatio="xMidYMid meet">
<g transform="translate(0.000000,800.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path d="M3885 7649 c-351 -34 -648 -172 -887 -412 -115 -116 -175 -204 -376
-552 -79 -137 -178 -308 -220 -380 -41 -71 -116 -202 -167 -290 -51 -88 -142
-245 -202 -350 -60 -104 -163 -282 -228 -395 -65 -113 -121 -209 -125 -215 -4
-5 -19 -30 -32 -55 -14 -25 -60 -106 -103 -180 -43 -74 -120 -207 -170 -295
-51 -88 -133 -230 -182 -315 -138 -238 -283 -489 -318 -550 -17 -30 -58 -100
-90 -155 -32 -55 -108 -188 -170 -295 -62 -107 -144 -249 -182 -315 -186 -320
-228 -395 -277 -493 -61 -123 -95 -223 -128 -372 -32 -150 -32 -381 0 -530 58
-266 172 -494 344 -686 242 -271 558 -426 945 -464 131 -13 5225 -13 5356 0
204 20 356 61 523 142 397 194 677 560 776 1018 32 151 32 381 -1 530 -49 222
-97 329 -320 715 -74 127 -176 304 -229 395 -52 91 -98 170 -102 175 -4 6 -19
30 -32 55 -14 25 -60 106 -103 180 -175 304 -266 462 -337 585 -42 72 -142
245 -223 385 -81 140 -181 314 -223 385 -41 72 -116 202 -167 290 -51 88 -131
227 -179 309 -47 82 -86 151 -86 153 0 2 -11 20 -23 41 -13 20 -76 127 -139
237 -63 110 -141 245 -173 300 -32 55 -82 141 -110 190 -366 636 -386 666
-531 810 -243 242 -518 368 -883 405 -112 11 -109 11 -226 -1z m350 -674 c207
-69 342 -184 462 -393 28 -48 83 -143 123 -212 40 -69 83 -143 95 -165 13 -22
55 -96 95 -165 79 -136 213 -367 240 -415 18 -32 92 -160 186 -323 31 -53 109
-187 172 -297 63 -110 154 -267 202 -350 47 -82 133 -231 190 -330 57 -99 124
-216 151 -260 26 -44 56 -96 67 -115 10 -19 54 -96 97 -170 43 -74 119 -207
170 -295 157 -273 307 -531 430 -745 378 -652 402 -699 424 -824 15 -82 14
-207 -3 -291 -62 -319 -327 -576 -646 -625 -89 -14 -5301 -14 -5390 0 -370 57
-653 389 -653 765 1 178 31 268 172 513 43 75 88 153 99 172 37 66 205 355
257 445 29 50 61 106 72 125 11 19 70 121 130 225 102 176 197 341 488 845 62
107 138 240 170 295 90 154 305 525 330 570 13 22 56 96 95 165 40 69 114 197
165 285 136 237 379 657 439 760 29 50 81 140 116 200 199 344 231 391 329
469 162 131 305 178 521 172 103 -3 139 -8 205 -31z"/>
<path d="M3859 5387 c-146 -61 -231 -167 -265 -328 -14 -67 -14 -94 0 -289 9
-118 21 -303 26 -410 6 -107 15 -262 21 -345 5 -82 16 -276 24 -430 27 -510
31 -548 58 -608 29 -64 86 -122 147 -150 69 -32 198 -30 265 5 72 38 126 99
155 178 7 20 16 117 21 230 8 202 31 632 49 900 5 85 14 232 20 325 5 94 15
252 21 352 10 157 9 191 -5 261 -28 138 -105 239 -226 296 -55 26 -79 31 -160
34 -82 2 -103 -1 -151 -21z"/>
<path d="M3874 2496 c-95 -31 -197 -123 -248 -223 -9 -18 -21 -65 -28 -106
-37 -243 153 -467 397 -467 86 0 147 18 217 63 111 71 174 172 184 297 16 182
-71 342 -225 418 -48 23 -70 27 -156 29 -63 2 -115 -2 -141 -11z"/>
</g>
</svg>

</svg>

6. Put the custom-ui.svg file under the img folder of the customization package.
7. Upload the package into the BO and deploy

Output:
 

• Article last edited: 18-Apr-2023