how to format an svg logo for tailwind-CodePudding

I am trying to figure out how to use Tailwind CSS templates so that I can add my own logo instead of its template logo.

The tailwind template (salient) shows its SVG logo example as:

export function Logo(props) {
  return (
    <svg aria-hidden="true" viewBox="0 0 109 40" {...props}>
      <path
        fillRule="evenodd"
        clipRule="evenodd"
      />
    </svg>
  )
}

That renders just fine.

When I try to add my svg file that I generated in https://jakearchibald.github.io/svgomg/

I get a file with xmlns in its markup. If I remove the xmlns using the toggle on the menu at svgomg, then the image disappears. If I import it with the xmlns into the logo component provided by tailwindcss, I am getting stuck for the formatting steps required to integrate with that component.

I tried to remove all the width, height, fill and xmlns data from the markup created by svgomg, but the icon does not render.

The first fragment of the svg tag has:

<defs>
            <clipPath 
              id="a"
            >
              <path 
                d="M97.742 171.805h179.516V203H97.742Zm0 0"
              />
            </clipPath>
          </defs>
          <path 
            d="M61.738 292.654v-64.96c9.906 17.737 28.566 27.874 49.297 27.874 36.855 0 64.496-27.183 64.496-64.27 0-37.316-27.64-64.726-65.88-64.726-38.007 0-65.417 27.18-65.417 65.879v100.203Zm47.914-52.98c-27.871 0-47.914-19.582-47.914-48.375 0-29.024 20.273-49.063 48.144-49.063 28.102 0 48.14 20.04 48.14 48.832 0 29.024-20.269 48.606-48.37 48.606ZM330.78 292.654V192.451c0-38.7-27.184-65.879-65.419-65.879-38.238 0-65.652 27.41-65.652 64.727 0 37.086 27.414 64.27 64.27 64.27 20.73 0 39.386-10.138 49.523-27.876v64.961Zm-65.419-52.98c-28.105 0-48.375-19.582-48.375-48.606 0-28.793 20.27-48.832 48.145-48.832 28.102 0 48.371 20.04 48.371 49.063 0 28.793-20.27 48.375-48.14 48.375Zm0 0"
          />
          <g clipPath="url(#a)"
          >

Does anyone know how to format an SVG file for use the Tailwinds CSS templates?

If i copy the full svg from svgomg and replace the svg tag from tailwind salient template entirely, then a huge logo renders. If I use the viewbox settings (and delete height and width settings from svgomg) from the tailwind template, then nothing renders in the header and the footer logo renders left aligned.

The full svg made by svgomg is:

<svg xmlns="http://www.w3.org/2000/svg" width="500" viewBox="0 0 375 375" height="500" version="1.0">
  <defs>
    <clipPath id="a">
      <path d="M146.258 167.793h82.484V318h-82.484Zm0 0"/>
    </clipPath>
  </defs>
  <path fill="#fff" d="M-37.5-37.5h450v450h-450z"/>
  <path fill="#fff" d="M-37.5-37.5h450v450h-450z"/>
  <path fill="#fff" d="M-37.5-37.5h450v450h-450z"/>
  <path d="M105.378 223.545c0 6.332 2.418 11.977 6.45 16.008 4.03 4.148 9.558 6.566 16.007 6.566 6.106 0 11.863-2.418 15.895-6.566 4.031-4.031 6.566-9.676 6.566-16.008V174.94h2.535c6.102 0 11.516-2.418 15.547-6.45 4.031-4.03 6.45-9.445 6.45-15.437 0-6.102-2.419-11.633-6.45-15.664-4.031-4.032-9.445-6.332-15.547-6.332h-2.535v-15.09c0-6.106-2.535-11.863-6.566-15.895-4.032-4.03-9.79-6.562-15.895-6.562-6.449 0-11.976 2.531-16.008 6.562-4.03 4.032-6.449 9.79-6.449 15.895v15.09h-2.074c-6.336 0-11.633 2.3-15.55 6.332a22.42 22.42 0 0 0-6.333 15.664c0 5.992 2.418 11.406 6.332 15.437 3.918 4.032 9.215 6.45 15.551 6.45h2.074Zm-1.5-67.148c-1.957 0-3.453-1.614-3.453-3.457 0-2.188 1.496-3.458 3.453-3.458h20.387v-33.515c0-1.957 1.266-3.453 3.457-3.453 1.84 0 3.453 1.496 3.453 3.453v33.515h21.309c1.957 0 3.457 1.27 3.457 3.458 0 1.843-1.5 3.457-3.457 3.457h-21.309v66.918c0 1.84-1.613 3.453-3.453 3.453-2.191 0-3.457-1.614-3.457-3.453v-66.918ZM237.372 246.12c13.359 0 26.836-2.536 36.738-8.18 9.906-5.645 16.473-14.512 16.473-27.41 0-9.333-3.457-16.704-8.871-22.231-5.41-5.527-12.782-9.559-20.614-12.438 1.266.114 2.418.23 3.801.23 4.95 0 10.25-1.151 14.395-4.148 4.148-2.996 7.14-7.832 7.14-15.203 0-8.867-5.758-15.894-14.625-20.617-8.87-4.723-21.078-7.14-33.98-7.14-11.516 0-20.27 2.535-27.067 6.566-6.793 4.031-11.402 9.328-14.394 14.742-2.996 5.527-4.262 11.172-4.262 15.664 0 13.707 6.91 23.149 15.777 29.14-.691-.116-1.382-.23-1.957-.23h-1.957c-6.105 0-10.71 2.301-13.82 5.758-3.113 3.457-4.61 8.063-4.61 12.668 0 8.754 3.458 15.203 8.868 20.043 5.414 4.836 12.672 8.063 20.387 10.02 7.718 1.957 15.664 2.765 22.578 2.765Zm.23-19.122c-7.832-.46-12.902-1.035-17.394-2.418-4.493-1.265-8.407-3.226-14.395-6.797-1.27-.804-1.73-1.84-1.73-2.879 0-1.382 1.039-2.535 2.879-2.535 1.152 0 2.535.461 4.148 1.27 1.496.922 3.453 1.843 5.875 2.879 4.605 2.074 11.055 4.144 20.617 4.144 8.29 0 15.086-1.265 19.695-3.57 4.606-2.188 7.254-5.067 7.254-8.637 0-3.226-1.265-5.988-3.914-8.176-5.183-4.379-13.363-7.488-22.46-10.484-4.493-1.496-8.755-3.11-12.669-5.066-7.832-3.801-13.707-8.754-13.707-16.93 0-4.149 1.383-9.215 5.645-13.016 4.144-3.8 11.172-6.68 22.574-6.68 3.57 0 6.91.344 10.25.919 6.45 1.27 11.633 3.113 14.629 5.183 1.496 1.04 2.188 2.074 2.188 2.88 0 1.73-1.383 2.882-3.34 2.882-1.614 0-2.996-.23-4.149-.809a54.023 54.023 0 0 1-4.144-1.726c-3.227-1.266-7.371-2.418-14.86-2.418-8.175 0-13.59 1.265-17.16 3.453-3.57 2.191-4.953 5.414-4.953 9.101 0 2.88 1.266 5.41 3.914 7.372 5.184 4.144 13.246 7.37 22.461 10.593 4.492 1.73 8.754 3.57 12.668 5.645 7.719 4.148 13.594 9.558 13.594 17.508 0 11.863-11.75 18.312-33.516 18.312Zm0 0" fill="#155e75"/>
  <g clip-path="url(#a)">
    <path fill="#fff" d="M146.258 167.793h82.789v150.062h-82.79Zm0 0"/>
  </g>
  <path d="M168.592 181.422v15.828h-2.406v-15.828h-6.11v-1.969h14.626v1.969ZM197.78 197.25l-2.03-5.203h-8.11l-2.047 5.203h-2.5l7.266-17.797h2.734l7.156 17.797Zm-6.077-15.969-.125.344c-.211.7-.524 1.594-.938 2.687l-2.266 5.86h6.657l-2.282-5.875a26.774 26.774 0 0 1-.718-1.969ZM210.436 197.25v-17.797h2.407v17.797ZM158.998 233.25v-17.797h2.407v15.828h8.984v1.969ZM198.086 233.25h-2.875l-3.078-11.297c-.211-.707-.508-1.973-.891-3.797a220.61 220.61 0 0 1-.563 2.438c-.148.656-1.293 4.875-3.437 12.656h-2.875l-5.25-17.797h2.516l3.203 11.313c.375 1.406.722 2.859 1.047 4.359.195-.926.425-1.938.687-3.031.27-1.094 1.441-5.305 3.516-12.64h2.312l3.094 11.077a127.65 127.65 0 0 1 1.11 4.594l.109-.438c.226-.968.41-1.753.547-2.359.144-.613 1.332-4.906 3.562-12.875h2.5ZM213.555 233.25v-17.797h2.406v17.797ZM163.791 269.25l-9.515-15.156.062 1.234.063 2.11v11.812h-2.14v-17.797h2.796l9.625 15.266c-.105-1.657-.156-2.852-.156-3.594v-11.672h2.172v17.797ZM193.999 260.172c0 1.836-.36 3.437-1.079 4.812-.71 1.375-1.726 2.434-3.046 3.172-1.313.73-2.825 1.094-4.532 1.094h-6.656v-17.797h5.875c3.02 0 5.348.758 6.984 2.266 1.633 1.511 2.454 3.664 2.454 6.453Zm-2.422 0c0-2.207-.606-3.89-1.813-5.047-1.21-1.156-2.96-1.734-5.25-1.734h-3.422v13.921h3.969c1.3 0 2.445-.285 3.438-.859.988-.57 1.75-1.394 2.28-2.469.532-1.07.798-2.343.798-3.812ZM168.506 300.344c0 1.636-.648 2.906-1.937 3.812-1.282.899-3.086 1.344-5.407 1.344-4.343 0-6.859-1.504-7.546-4.516l2.343-.468c.27 1.074.844 1.859 1.72 2.359.874.5 2.062.75 3.562.75 1.562 0 2.765-.266 3.609-.797.844-.539 1.266-1.328 1.266-2.36 0-.581-.137-1.054-.407-1.421-.261-.363-.632-.66-1.11-.89a8.014 8.014 0 0 0-1.718-.595l-2.203-.515c-1.406-.313-2.476-.625-3.203-.938-.73-.312-1.309-.66-1.734-1.047a4.009 4.009 0 0 1-.97-1.343c-.218-.508-.327-1.098-.327-1.766 0-1.52.582-2.691 1.75-3.516 1.164-.832 2.836-1.25 5.015-1.25 2.02 0 3.563.313 4.625.938 1.07.617 1.82 1.668 2.25 3.156l-2.375.422c-.261-.945-.757-1.629-1.484-2.047-.73-.426-1.746-.64-3.047-.64-1.418 0-2.5.234-3.25.703-.75.468-1.125 1.172-1.125 2.11 0 .554.145 1.007.438 1.358.289.356.707.657 1.25.907.55.25 1.64.558 3.265.922.551.125 1.098.257 1.64.39.54.125 1.063.281 1.563.469.5.18.961.387 1.39.625.438.242.813.539 1.126.89.32.356.57.774.75 1.25.187.481.281 1.047.281 1.704ZM187.318 305.25h-2.5l-7.265-17.797h2.546l4.922 12.531 1.063 3.141 1.062-3.14 4.891-12.532h2.547ZM203.74 296.266c0-2.883.773-5.118 2.328-6.704 1.55-1.582 3.726-2.375 6.531-2.375 1.969 0 3.566.336 4.797 1 1.226.668 2.176 1.735 2.844 3.204l-2.297.671c-.512-1.007-1.211-1.742-2.094-2.203-.887-.468-1.992-.703-3.312-.703-2.063 0-3.637.625-4.72 1.875-1.085 1.242-1.624 2.985-1.624 5.235 0 2.25.57 4.027 1.719 5.328 1.156 1.304 2.753 1.953 4.796 1.953 1.164 0 2.25-.176 3.25-.531 1.008-.352 1.82-.832 2.438-1.438v-3.203h-5.313v-2.031h7.547v6.14c-.949.961-2.105 1.703-3.468 2.235-1.368.523-2.852.781-4.454.781-1.867 0-3.468-.367-4.812-1.11-1.344-.738-2.375-1.804-3.094-3.203-.71-1.394-1.062-3.035-1.062-4.921Zm0 0" fill="#0b0a07"/>
</svg>

CodePudding user response：

It's the viewbox setting.

Use the one from svgomg to replace the one in the template.

CodePudding user response：

SVG's needs a width and height attributes as well as viewbox attribute to properly display and change the size programmatically, with react and next js, I personally use this tool to format my svgs to use as a component, it will simply convert the SVG markup into a component and you can change the props as you wish. I tested your svg with the tailwind template and it's working. here's the changes to mark up. but you need to properly format the SVG before exporting it as a markup from some tool to remove extra space around the SVG.

<svg aria-hidden="false" viewBox="0 0 290 320" width="100" height="100">
     <defs>
    <clipPath id="a">
      <path d="M146.258 167.793h82.484V318h-82.484Zm0 0"></path>
    </clipPath>
  </defs>
  <path fill="#fff" d="M-37.5-37.5h450v450h-450z"></path>
  <path fill="#fff" d="M-37.5-37.5h450v450h-450z"></path>
  <path fill="#fff" d="M-37.5-37.5h450v450h-450z"></path>
  <path d="M105.378 223.545c0 6.332 2.418 11.977 6.45 16.008 4.03 4.148 9.558 6.566 16.007 6.566 6.106 0 11.863-2.418 15.895-6.566 4.031-4.031 6.566-9.676 6.566-16.008V174.94h2.535c6.102 0 11.516-2.418 15.547-6.45 4.031-4.03 6.45-9.445 6.45-15.437 0-6.102-2.419-11.633-6.45-15.664-4.031-4.032-9.445-6.332-15.547-6.332h-2.535v-15.09c0-6.106-2.535-11.863-6.566-15.895-4.032-4.03-9.79-6.562-15.895-6.562-6.449 0-11.976 2.531-16.008 6.562-4.03 4.032-6.449 9.79-6.449 15.895v15.09h-2.074c-6.336 0-11.633 2.3-15.55 6.332a22.42 22.42 0 0 0-6.333 15.664c0 5.992 2.418 11.406 6.332 15.437 3.918 4.032 9.215 6.45 15.551 6.45h2.074Zm-1.5-67.148c-1.957 0-3.453-1.614-3.453-3.457 0-2.188 1.496-3.458 3.453-3.458h20.387v-33.515c0-1.957 1.266-3.453 3.457-3.453 1.84 0 3.453 1.496 3.453 3.453v33.515h21.309c1.957 0 3.457 1.27 3.457 3.458 0 1.843-1.5 3.457-3.457 3.457h-21.309v66.918c0 1.84-1.613 3.453-3.453 3.453-2.191 0-3.457-1.614-3.457-3.453v-66.918ZM237.372 246.12c13.359 0 26.836-2.536 36.738-8.18 9.906-5.645 16.473-14.512 16.473-27.41 0-9.333-3.457-16.704-8.871-22.231-5.41-5.527-12.782-9.559-20.614-12.438 1.266.114 2.418.23 3.801.23 4.95 0 10.25-1.151 14.395-4.148 4.148-2.996 7.14-7.832 7.14-15.203 0-8.867-5.758-15.894-14.625-20.617-8.87-4.723-21.078-7.14-33.98-7.14-11.516 0-20.27 2.535-27.067 6.566-6.793 4.031-11.402 9.328-14.394 14.742-2.996 5.527-4.262 11.172-4.262 15.664 0 13.707 6.91 23.149 15.777 29.14-.691-.116-1.382-.23-1.957-.23h-1.957c-6.105 0-10.71 2.301-13.82 5.758-3.113 3.457-4.61 8.063-4.61 12.668 0 8.754 3.458 15.203 8.868 20.043 5.414 4.836 12.672 8.063 20.387 10.02 7.718 1.957 15.664 2.765 22.578 2.765Zm.23-19.122c-7.832-.46-12.902-1.035-17.394-2.418-4.493-1.265-8.407-3.226-14.395-6.797-1.27-.804-1.73-1.84-1.73-2.879 0-1.382 1.039-2.535 2.879-2.535 1.152 0 2.535.461 4.148 1.27 1.496.922 3.453 1.843 5.875 2.879 4.605 2.074 11.055 4.144 20.617 4.144 8.29 0 15.086-1.265 19.695-3.57 4.606-2.188 7.254-5.067 7.254-8.637 0-3.226-1.265-5.988-3.914-8.176-5.183-4.379-13.363-7.488-22.46-10.484-4.493-1.496-8.755-3.11-12.669-5.066-7.832-3.801-13.707-8.754-13.707-16.93 0-4.149 1.383-9.215 5.645-13.016 4.144-3.8 11.172-6.68 22.574-6.68 3.57 0 6.91.344 10.25.919 6.45 1.27 11.633 3.113 14.629 5.183 1.496 1.04 2.188 2.074 2.188 2.88 0 1.73-1.383 2.882-3.34 2.882-1.614 0-2.996-.23-4.149-.809a54.023 54.023 0 0 1-4.144-1.726c-3.227-1.266-7.371-2.418-14.86-2.418-8.175 0-13.59 1.265-17.16 3.453-3.57 2.191-4.953 5.414-4.953 9.101 0 2.88 1.266 5.41 3.914 7.372 5.184 4.144 13.246 7.37 22.461 10.593 4.492 1.73 8.754 3.57 12.668 5.645 7.719 4.148 13.594 9.558 13.594 17.508 0 11.863-11.75 18.312-33.516 18.312Zm0 0" fill="#155e75"></path>
  <g clip-path="url(#a)">
    <path fill="#fff" d="M146.258 167.793h82.789v150.062h-82.79Zm0 0"></path>
  </g>
  <path d="M168.592 181.422v15.828h-2.406v-15.828h-6.11v-1.969h14.626v1.969ZM197.78 197.25l-2.03-5.203h-8.11l-2.047 5.203h-2.5l7.266-17.797h2.734l7.156 17.797Zm-6.077-15.969-.125.344c-.211.7-.524 1.594-.938 2.687l-2.266 5.86h6.657l-2.282-5.875a26.774 26.774 0 0 1-.718-1.969ZM210.436 197.25v-17.797h2.407v17.797ZM158.998 233.25v-17.797h2.407v15.828h8.984v1.969ZM198.086 233.25h-2.875l-3.078-11.297c-.211-.707-.508-1.973-.891-3.797a220.61 220.61 0 0 1-.563 2.438c-.148.656-1.293 4.875-3.437 12.656h-2.875l-5.25-17.797h2.516l3.203 11.313c.375 1.406.722 2.859 1.047 4.359.195-.926.425-1.938.687-3.031.27-1.094 1.441-5.305 3.516-12.64h2.312l3.094 11.077a127.65 127.65 0 0 1 1.11 4.594l.109-.438c.226-.968.41-1.753.547-2.359.144-.613 1.332-4.906 3.562-12.875h2.5ZM213.555 233.25v-17.797h2.406v17.797ZM163.791 269.25l-9.515-15.156.062 1.234.063 2.11v11.812h-2.14v-17.797h2.796l9.625 15.266c-.105-1.657-.156-2.852-.156-3.594v-11.672h2.172v17.797ZM193.999 260.172c0 1.836-.36 3.437-1.079 4.812-.71 1.375-1.726 2.434-3.046 3.172-1.313.73-2.825 1.094-4.532 1.094h-6.656v-17.797h5.875c3.02 0 5.348.758 6.984 2.266 1.633 1.511 2.454 3.664 2.454 6.453Zm-2.422 0c0-2.207-.606-3.89-1.813-5.047-1.21-1.156-2.96-1.734-5.25-1.734h-3.422v13.921h3.969c1.3 0 2.445-.285 3.438-.859.988-.57 1.75-1.394 2.28-2.469.532-1.07.798-2.343.798-3.812ZM168.506 300.344c0 1.636-.648 2.906-1.937 3.812-1.282.899-3.086 1.344-5.407 1.344-4.343 0-6.859-1.504-7.546-4.516l2.343-.468c.27 1.074.844 1.859 1.72 2.359.874.5 2.062.75 3.562.75 1.562 0 2.765-.266 3.609-.797.844-.539 1.266-1.328 1.266-2.36 0-.581-.137-1.054-.407-1.421-.261-.363-.632-.66-1.11-.89a8.014 8.014 0 0 0-1.718-.595l-2.203-.515c-1.406-.313-2.476-.625-3.203-.938-.73-.312-1.309-.66-1.734-1.047a4.009 4.009 0 0 1-.97-1.343c-.218-.508-.327-1.098-.327-1.766 0-1.52.582-2.691 1.75-3.516 1.164-.832 2.836-1.25 5.015-1.25 2.02 0 3.563.313 4.625.938 1.07.617 1.82 1.668 2.25 3.156l-2.375.422c-.261-.945-.757-1.629-1.484-2.047-.73-.426-1.746-.64-3.047-.64-1.418 0-2.5.234-3.25.703-.75.468-1.125 1.172-1.125 2.11 0 .554.145 1.007.438 1.358.289.356.707.657 1.25.907.55.25 1.64.558 3.265.922.551.125 1.098.257 1.64.39.54.125 1.063.281 1.563.469.5.18.961.387 1.39.625.438.242.813.539 1.126.89.32.356.57.774.75 1.25.187.481.281 1.047.281 1.704ZM187.318 305.25h-2.5l-7.265-17.797h2.546l4.922 12.531 1.063 3.141 1.062-3.14 4.891-12.532h2.547ZM203.74 296.266c0-2.883.773-5.118 2.328-6.704 1.55-1.582 3.726-2.375 6.531-2.375 1.969 0 3.566.336 4.797 1 1.226.668 2.176 1.735 2.844 3.204l-2.297.671c-.512-1.007-1.211-1.742-2.094-2.203-.887-.468-1.992-.703-3.312-.703-2.063 0-3.637.625-4.72 1.875-1.085 1.242-1.624 2.985-1.624 5.235 0 2.25.57 4.027 1.719 5.328 1.156 1.304 2.753 1.953 4.796 1.953 1.164 0 2.25-.176 3.25-.531 1.008-.352 1.82-.832 2.438-1.438v-3.203h-5.313v-2.031h7.547v6.14c-.949.961-2.105 1.703-3.468 2.235-1.368.523-2.852.781-4.454.781-1.867 0-3.468-.367-4.812-1.11-1.344-.738-2.375-1.804-3.094-3.203-.71-1.394-1.062-3.035-1.062-4.921Zm0 0" fill="#0b0a07"></path>
</svg>

you can resize the SVG by just passing width and height to the SVG.

But my preferred way of using svgs in react and next js is like this. I'm using typescript with react or next, this is an example of how my icons or logo svgs look like

import * as React from 'react';
import Svg, { Path } from 'react-native-svg';
import { FC } from 'react';

interface Props {
    color?: string;
    size?: number;
}

const BackIcon: FC<Props> = ({ size, color }) => {
    return (
        <Svg width={size ?? 8} height={size ?? 16} viewBox="0 0 8 16" fill="none">
            <Path
                d="M7 15 1 8l6-7"
                stroke={color ?? '#525252'}
                strokeWidth={2}
                strokeLinecap="round"
                strokeLinejoin="round"
            />
        </Svg>
    );
};

export default BackIcon;

this is a icon, so I need the luxury to change the color and size of the icon according to the place I use it, that's why I made it accept the color and size as the props. you can use this as a component in your app like below

<BackIcon size={10} color={'#ddd'} />

and this is another way I prefer my icon components should looks like

import React from 'react'

interface Props {
  size?: number | string
  color?: string
}

const CloseIcon: React.FC<Props> = ({ size, color }) => {
  return (
    <svg width={size ?? '100%'} height={size ?? '100%'} fill="none" viewBox="0 0 16 16">
      <path
        d="M1.25 1.25 8 8m0 0-6.75 6.75M8 8l6.75 6.75M8 8l6.75-6.75"
        stroke={color ?? 'currentColor'}
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  )
}

export default CloseIcon

see the difference here, I used 100% as width and height and currentColor as the default color, with this approach you can pass color and size to the icon itself if you want or you can just wrap it around another element, and style the parent element, so the sizes and color of the parent element will be used in the SVG component. I think this is easy to use in some scenarios. here's how we can use this kind of SVG

<button type="button" className="close-button">
  <CloseIcon size={12} />
</button>

style.css
.close-button {
  color: 'red';
}

color will be inherited from the icon component with the above implementation and you can do the same for the size.

those are just extra tips, if any one needs to know how to work with svgs in react as components, and as I described above, viewbox attributes plays a huge role when it comes to sizing the svgs, I suggest reading about it little more and try to understand how svgs work. svgs can be tricky sometimes. happy coding!