How to change account/login icon in Dawn 14.0.0

How to change account/login icon in Dawn 14.0.0

PedroPrado
Excursionist
41 0 6

How do I change the account/login icon, the one that is a little person, to my own svg?

Replies 6 (6)

AcidPi
Shopify Partner
61 14 16

Hi,

 

Update this file icon-account.liquid via Edit Code
Try to add optimized SVG code that matches the original dimensions of SVG document (px) 18w x 19h , and icon (px) 17w x 18h.

Capture 1234.PNG

 

Regards

PedroPrado
Excursionist
41 0 6

Did not work. This is the svg that I want to put in the original log (there is something written after the code):

<svg
   width="2000mm"
   height="2000mm"
   viewBox="0 0 2000 2000"
   version="1.1"
   id="svg1"
   inkscape:export-filename="ÍCONE CONTA MAIOR-000000ff-00000000.png"
   inkscape:export-xdpi="25.4"
   inkscape:export-ydpi="25.4"
   xml:space="preserve"
   inkscape:version="1.3.2 (091e20e, 2023-11-25, custom)"
   sodipodi:docname="ÍCONE CONTA PARA O SITE.svg"
   xmlns:svg="http://www.w3.org/2000/svg"><sodipodi:namedview
     id="namedview1"
     pagecolor="#ffffff"
     bordercolor="#000000"
     borderopacity="0.25"
     inkscape:showpageshadow="2"
     inkscape:pageopacity="0.0"
     inkscape:pagecheckerboard="0"
     inkscape:deskcolor="#d1d1d1"
     inkscape:document-units="mm"
     showguides="true"
     inkscape:export-bgcolor="#ffffff00"
     inkscape:zoom="0.056568542"
     inkscape:cx="2430.6796"
     inkscape:cy="3349.9184"
     inkscape:window-width="1920"
     inkscape:window-height="1009"
     inkscape:window-x="1358"
     inkscape:window-y="-8"
     inkscape:window-maximized="1"
     inkscape:current-layer="layer1" /><defs
     id="defs1" /><g
     inkscape:label="Camada 1"
     inkscape:groupmode="layer"
     id="layer1"><g
       id="g1"
       transform="matrix(0.25006925,0,0,0.25006925,-629.93503,-409.4417)"
       style="display:none"><ellipse
         style="display:none;fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:732;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:100;stroke-dasharray:none;stroke-dashoffset:4515.02;stroke-opacity:1"
         id="path1-3"
         cx="6560.1636"
         cy="5204.5732"
         rx="555.74463"
         ry="555.67902" /><path
         id="path5-9-9"
         style="display:none;fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:732;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:100;stroke-dasharray:none;stroke-dashoffset:4515.02;stroke-opacity:1"
         d="M 7867.6062,7418.2477 A 1308.2513,1308.0968 0 0 0 6560.0011,6151.2602 1308.2513,1308.0968 0 0 0 5252.3999,7418.1245 Z" /></g><g
       id="g6"
       transform="matrix(0.23548275,0,0,0.23545495,-599.19834,-315.18804)"><path
         id="path5"
         style="display:none;fill:none;fill-opacity:0;stroke:#ffffff;stroke-width:777.388;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:100;stroke-dasharray:none;stroke-dashoffset:4515.02;stroke-opacity:1"
         d="M 8179.748,7056.3536 A 1389.2882,1389.2882 0 0 0 6791.146,5710.7264 1389.2882,1389.2882 0 0 0 5402.5481,7056.2227 Z" /><path
         id="path5-9"
         style="display:inline;fill:none;fill-opacity:0;stroke:#000000;stroke-width:260;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:100;stroke-dasharray:none;stroke-dashoffset:4515.02;stroke-opacity:1"
         d="M 8179.7485,7056.3533 A 1389.2882,1389.2882 0 0 0 6791.1465,5710.726 1389.2882,1389.2882 0 0 0 5402.5486,7056.2224 Z" /><circle
         style="fill:#ffffff;fill-opacity:0;stroke:#000000;stroke-width:260;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:100;stroke-dasharray:none;stroke-dashoffset:4515.02;stroke-opacity:1"
         id="path1"
         cx="6791.3188"
         cy="4705.2798"
         r="590.16907" /></g></g></svg>


There was a guy who said that when something goes wrong, you should remove these first two lines of code: width="2000mm"
height="2000mm"
But it still doesn't work.
If I leave these lines the icon becomes huge. If I remove it, it doesn't appear. But when I try to adjust their size it becomes very messy on the website.
I found it strange because when I looked at the cart and search icons it didn't give me exactly this problem.

AcidPi
Shopify Partner
61 14 16

Hi,

When creating SVG for online use, they need to be created in a particular way, sized and then saved as a Plain SVG if using inkscape you then open SVG in a code editor and copy the d="". The SVG's on Shopify are optimized and don't use groups, layers, stroke paint or stroke styles but fills with self-intersections or subpaths to create holes in fills (fill-rule:evenodd). Set the final document size and viewBox, use the path tools; stroke to path, group by Union, remove as many nodes as you can and unset stroke paint.


Thin Version Optimized (based on your original SVG, however matches existing icons and styles better with CSS)

 

<svg
  xmlns="http://www.w3.org/2000/svg"
  aria-hidden="true"
  focusable="false"
  class="icon icon-account"
  fill="none"
  viewBox="0 0 18 19"
>
  <path fill-rule="evenodd" clip-rule="evenodd" 
   d="m 9.0009971,0.5 c -2.144764,0 -3.89224,1.7525375 -3.89224,3.903777 0,2.1511873 1.7474102,3.903787 3.89224,3.903787 2.1447439,0 3.8922389,-1.7525499 3.8922389,-3.903787 C 12.893236,2.2526445 11.145831,0.5 9.0009971,0.5 Z m 0,0.975583 c 1.6090269,0 2.9195429,1.3144519 2.9195429,2.928194 0,1.6138028 -1.310593,2.928204 -2.9195429,2.928204 -1.6089086,0 -2.919546,-1.3143287 -2.919546,-2.928204 0,-1.613851 1.3105967,-2.928194 2.919546,-2.928194 z m -10e-4,8.260092 c -4.5823592,0 -8.35530839,3.666455 -8.49975696,8.260369 -0.008626,0.275268 0.21149747,0.503124 0.486087,0.503162 L 17.013654,18.5 c 0.274577,-2.7e-5 0.494705,-0.227855 0.486107,-0.503112 C 17.355734,13.402635 13.582605,9.735717 8.9999771,9.735717 Z m 0,0.97558 c 3.8777339,0 7.1169319,2.965994 7.4946309,6.813106 L 1.5054451,17.523567 c 0.3780034,-3.846516 3.6167777,-6.812394 7.494552,-6.812394 z" 
   fill="currentColor">
</svg>

 

Thick Version Optimized (based on your original SVG)

 

<svg
  xmlns="http://www.w3.org/2000/svg"
  aria-hidden="true"
  focusable="false"
  class="icon icon-account"
  fill="none"
  viewBox="0 0 18 19"
>
  <path fill-rule="evenodd" clip-rule="evenodd" 
   d="m 9.0009261,0.5 c -2.2213192,0 -4.0309777,1.8180738 -4.0309777,4.0493861 0,2.2313095 1.809695,4.0493482 4.0309777,4.0493482 2.2211179,0 4.0309769,-1.8178836 4.0309769,-4.0493482 C 13.031903,2.3180387 11.2222,0.5 9.0009261,0.5 Z m 0,1.4619213 c 1.4189829,0 2.5756709,1.1609143 2.5756709,2.5874648 0,1.4249509 -1.155196,2.5874261 -2.5756709,2.5874261 -1.4190216,0 -2.5757087,-1.1609029 -2.5757087,-2.5874261 0,-1.4269689 1.156854,-2.5874648 2.5757087,-2.5874648 z m -9.445e-4,7.509921 c -4.5821318,0 -8.35517897,3.6722207 -8.49962328,8.2734237 -0.0128906,0.412488 0.31644154,0.75392 0.72725628,0.753978 L 16.772311,18.5 c 0.410829,-1.5e-5 0.740202,-0.341437 0.727332,-0.75394 C 17.35526,13.14392 13.582114,9.4718423 8.9999429,9.4718423 Z m 0,1.4619587 c 3.5296704,0 6.4993784,2.629892 6.9807464,6.10424 l -13.9614171,-6.8e-4 c 0.4817147,-3.47417 3.4513754,-6.10356 6.980632,-6.10356 z" 
   fill="currentColor">
</svg>

 

Note: You can copy and past above code or any SVG code to a code editor save as .svg and open in inkscape.

Regards

PedroPrado
Excursionist
41 0 6

Hey,

Thank you very much for your help, I learned a lot from your message. However, the image size of the optimized svg you uploaded is not the same size as the others.
So how do I transform my Inkscape svgs into these optimized svgs? Please be more clear.

Thank you very much for your help so far. I wait for your response.

AcidPi
Shopify Partner
61 14 16

Hi @PedroPrado 

Your site has some issues as my provided SVG edits are based off the default dawn SVG's and your website is using custom ones set at different dimensions with a custom element <account-icon> wrapping account login icon affecting CSS, even matching existing SVG XML format and size, you will have issues on mobile navigation with the icon being massive.

Use this one with the following CSS. ( enlarged document and viewBox to 20x20 - SVG & XML )

 

<svg
  xmlns="http://www.w3.org/2000/svg"
  aria-hidden="true"
  focusable="false"
  class="icon icon-account"
  fill="none"
  viewBox="0 0 20 20"
>
  <path fill-rule="evenodd" clip-rule="evenodd" 
   d="M 10.001084,0 C 7.3877698,0 5.2587617,2.020082 5.2587617,4.4993179 c 0,2.4792328 2.129051,4.4992758 4.7423223,4.4992758 2.613077,0 4.742321,-2.0198707 4.742321,-4.4992758 C 14.743405,2.020043 12.614345,0 10.001084,0 Z m 0,1.624357 c 1.66939,0 3.030198,1.2899048 3.030198,2.8749609 0,1.5832788 -1.359053,2.8749179 -3.030198,2.8749179 -1.6694355,0 -3.0302426,-1.2898921 -3.0302426,-2.8749179 0,-1.585521 1.3610034,-2.8749609 3.0302426,-2.8749609 z m -0.0011,8.344357 c -5.3907388,0 -9.82961382,4.080245 -9.99954814884,9.192693 C -0.01472925,19.619727 0.37271998,19.999096 0.85603096,19.99916 L 19.143881,20 c 0.483328,-1.7e-5 0.870825,-0.379374 0.855684,-0.837711 C 19.829703,14.0488 15.390712,9.968714 9.9999273,9.968714 Z m 0,1.624398 c 4.152549,0 7.64632,2.922102 8.212635,6.782489 L 1.7874376,18.374846 c 0.5667227,-3.860189 4.060438,-6.781734 8.2125007,-6.781734 z" 
   fill="currentColor">
</svg>

 

 

Add CSS to Theme settings > Custom CSS ( moves icon up slightly and removes hover effect )

 

 

.header__icon > account-icon {padding-bottom:1px;} 
.header__icon:hover .icon {
  transform: none;
}

 

 


Example.

example Capture.PNG

 

 

 

Regards

PedroPrado
Excursionist
41 0 6