How to change account/login icon in Dawn 14.0.0

PedroPrado · ‎06-17-2024

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

AcidPi · ‎06-17-2024

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.

Regards

PedroPrado · ‎06-17-2024

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:inkscape="http://www.inkscape.org/namespaces/inkscape"

xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"

xmlns="http://www.w3.org/2000/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 · ‎06-18-2024

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 · ‎06-18-2024

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 · ‎06-18-2024

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.

Regards

PedroPrado · ‎06-17-2024

And this is my site: https://mi8w9lspkvkx4fju-78296449301.shopifypreview.com

How to change account/login icon in Dawn 14.0.0

How to change account/login icon in Dawn 14.0.0

Community Blog Articles