How to generate the SVG files at the Footer

Sharetribe Go Community Edition
1

Hi,

In the footer of the platform there are some social network SVG images. How are they generated? We would like to generate similar SVGs for other social networks. We tried to convert a PNG file to SVG and they are not compatible with the code.

<a class="footer__social-media-link" href="<%= social['url'] %>" target="_blank" rel="noreferrer">

          <% case social["service"] %>
          <% when "facebook" %>

            <svg class="footer__social-media-icon footer__facebook-icon" viewBox="0 0 12 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
              <path d="M7.78896556,22 L7.78896556,11.9648254 L11.3270218,11.9648254 L11.8567155,8.05386965 L7.78896556,8.05386965 L7.78896556,5.55689722 C7.78896556,4.42458426 8.11918279,3.65297638 9.8247272,3.65297638 L12,3.65200544 L12,0.15408855 C11.623687,0.106512375 10.3324948,0 8.83030221,0 C5.69405446,0 3.54703063,1.82255587 3.54703063,5.16968541 L3.54703063,8.05386965 L0,8.05386965 L0,11.9648254 L3.54703063,11.9648254 L3.54703063,22 L7.78896556,22 Z" id="Facebook" stroke="none" fill-rule="evenodd"></path>
            </svg>

          <% when "twitter" %>

            <svg class="footer__social-media-icon footer__twitter-icon" viewBox="48 2 21 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
              <path d="M68.4207941,2.33276729 C67.5875898,2.8529685 66.6669159,3.23129666 65.6828825,3.43372529 C64.8990201,2.55134408 63.778736,2 62.5384615,2 C60.1610819,2 58.2317037,4.03466726 58.2317037,6.54397488 C58.2317037,6.90038768 58.2687101,7.24584281 58.3427229,7.57861011 C54.7620751,7.38886931 51.5879369,5.58200634 49.4617521,2.829323 C49.0905668,3.50293166 48.8786212,4.28438691 48.8786212,5.11659351 C48.8786212,6.69219186 49.6389341,8.08323988 50.7956639,8.89814488 C50.0902998,8.87622953 49.4247457,8.66976387 48.8427362,8.33180609 L48.8427362,8.38717119 C48.8427362,10.5896639 50.3280378,12.427093 52.3005901,12.8429079 C51.9394975,12.9496011 51.5582196,13.003236 51.165167,13.003236 C50.8876191,13.003236 50.6167997,12.9755535 50.3543908,12.9224953 C50.9027581,14.7270514 52.4929111,16.0413957 54.3785545,16.0765756 C52.9044669,17.2957611 51.0457373,18.022428 49.0277681,18.022428 C48.6801324,18.022428 48.3364216,18.0016661 48,17.9601423 C49.9063893,19.2473807 52.1721891,20 54.6045177,20 C62.530051,20 66.8626011,13.0770562 66.8626011,7.07167345 C66.8626011,6.87385858 66.8592369,6.67662042 66.8519478,6.48284259 C67.6935626,5.84210695 68.424719,5.04219666 69,4.13097946 C68.228473,4.49200602 67.3975115,4.7365352 66.5261795,4.84611195 C67.4160147,4.28438691 68.0989507,3.39393163 68.4207941,2.33276729" id="Twitter" stroke="none" fill-rule="evenodd"></path>
            </svg>
2

Hi @thomasmalbaux sorry for the direct mention but could you help us with this?

3

@freelensia

did you try to use SVG from FontAwesome icons?
Like https://fontawesome.com/icons/foursquare?style=brands

4

Hi @zenik

  1. I want to create new icons for Vietnamese websites following the same style
  2. The link you provide seems like it is a paying service. We are looking for a free solution at the moment.