Forenkling og forbedring av piktogrammer

[macbruker]

Vi har kuttet ut animasjoner for piktogrammene på nav.no. Vi har også brukt farger på nye måter i oversiktssidene og i nye maler. Derfor mener jeg det er god grunn til å forenkle og forbedre koden bak.

Eksempel fra dagens kode:

<span class="Illustration_image__kwPT7 GeneralPageHeader_illustration__wg2_o" aria-hidden="true">
  <span class="IllustrationStatic_icon__TW2cp back" id=":R4imm:">
    <svg role="img" width="96" height="96" viewBox="0 0 96 96" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path fill-rule="evenodd" clip-rule="evenodd" d="M48 16C61.2548 16 72 26.3995 72 39.2279C72 44.1254 70.434 48.6688 67.7601 52.4148L66.5839 53.9963C64.6277 56.7266 61.9886 61.2671 58.6667 67.6176H37.3333L35.7344 64.5981C33.1749 59.8375 31.0804 56.3189 29.451 54.0424L28.8012 53.1686C25.7865 49.2858 24 44.4588 24 39.2279C24 26.3995 34.7452 16 48 16Z" fill="#CCF1D6"></path>
      <path d="M38.7695 73.6475H57.2311" stroke="#CCF1D6" stroke-width="3"></path>
      <path d="M43.6924 80.7061H52.3078" stroke="#CCF1D6" stroke-width="3"></path>
      <path d="M48 21.7061V29.9413" stroke="#CCF1D6" stroke-width="3"></path>
      <path d="M31.6924 25.2354L36.0001 32.3673" stroke="#CCF1D6" stroke-width="3"></path>
      <path d="M64 25.2354L59.6923 32.3673" stroke="#CCF1D6" stroke-width="3"></path>
    </svg>
  </span>
  <span class="IllustrationStatic_icon__TW2cp front" id=":R8imm:">
    <svg role="img" width="96" height="96" viewBox="0 0 96 96" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path fill-rule="evenodd" clip-rule="evenodd" d="M19.6665 63.5C14.6959 63.5 10.6665 67.5294 10.6665 72.5C10.6665 77.4706 14.6959 81.5 19.6665 81.5C24.6371 81.5 28.6665 77.4706 28.6665 72.5C28.6665 67.5294 24.6371 63.5 19.6665 63.5ZM7.6665 72.5C7.6665 65.8726 13.0391 60.5 19.6665 60.5C26.2939 60.5 31.6665 65.8726 31.6665 72.5C31.6665 79.1274 26.2939 84.5 19.6665 84.5C13.0391 84.5 7.6665 79.1274 7.6665 72.5Z" fill="#262626"></path>
      <path fill-rule="evenodd" clip-rule="evenodd" d="M11.1665 44.5C11.1665 43.6716 11.8381 43 12.6665 43H17.3332C18.1616 43 18.8332 43.6716 18.8332 44.5V54.6667H36.3332C38.2661 54.6667 39.8332 56.2336 39.8332 58.1667V66.3333H47.6665C48.4949 66.3333 49.1665 67.0049 49.1665 67.8333C49.1665 68.6617 48.4949 69.3333 47.6665 69.3333H38.3332C37.5048 69.3333 36.8332 68.6617 36.8332 67.8333V58.1667C36.8332 57.8906 36.6093 57.6667 36.3332 57.6667H17.3332C16.5048 57.6667 15.8332 56.9951 15.8332 56.1667V46H12.6665C11.8381 46 11.1665 45.3284 11.1665 44.5Z" fill="#262626"></path>
      <path fill-rule="evenodd" clip-rule="evenodd" d="M41.8332 75.167C40.0843 75.167 38.6665 76.5848 38.6665 78.3337C38.6665 80.0826 40.0843 81.5004 41.8332 81.5004C43.5821 81.5004 44.9999 80.0826 44.9999 78.3337C44.9999 76.5848 43.5821 75.167 41.8332 75.167ZM35.6665 78.3337C35.6665 74.9279 38.4274 72.167 41.8332 72.167C45.239 72.167 47.9999 74.9279 47.9999 78.3337C47.9999 81.7395 45.239 84.5004 41.8332 84.5004C38.4274 84.5004 35.6665 81.7395 35.6665 78.3337Z" fill="#262626"></path>
      <path fill-rule="evenodd" clip-rule="evenodd" d="M79.8198 19.435C74.743 14.3582 66.5118 14.3582 61.435 19.435C56.3582 24.5118 56.3582 32.743 61.435 37.8198C66.5118 42.8966 74.743 42.8966 79.8198 37.8198C84.8966 32.743 84.8966 24.5118 79.8198 19.435ZM59.3137 17.3137C65.5621 11.0653 75.6927 11.0653 81.9411 17.3137C88.1895 23.5621 88.1895 33.6927 81.9411 39.9411C75.6927 46.1895 65.5621 46.1895 59.3137 39.9411C53.0653 33.6927 53.0653 23.5621 59.3137 17.3137Z" fill="#262626"></path>
      <path fill-rule="evenodd" clip-rule="evenodd" d="M79.5848 19.6706L74.3993 32.3985L62.1427 37.1126L66.8568 24.8561L79.5848 19.6706ZM69.1908 27.1446L67.3659 31.8894L72.1108 30.0645L74.1182 25.1372L69.1908 27.1446Z" fill="#262626"></path>
      <path fill-rule="evenodd" clip-rule="evenodd" d="M72.7486 32.1628L67.0918 26.5059L69.2132 24.3846L74.87 30.0415L72.7486 32.1628Z" fill="#262626"></path>
    </svg>
  </span>
</span>

Forslag hentet fra prototypen av nav.no:

<div class="pictogram__woHO0" style="--navno-pictogram:#EEE">
  <svg aria-hidden="true" focusable="false" width="96" height="96" fill="none" viewBox="0 0 96 96" xmlns="http://www.w3.org/2000/svg">
    <path fill="var(--navno-pictogram, #EEE)" d="M16 36h64v24H16z"></path>
    <path fill="var(--navno-pictogram, #EEE)" d="M60 16v64H36V16z"></path>
    <circle cx="50.4" cy="75.2" r="8.7" stroke="currentColor" stroke-width="3"></circle>
    <path stroke="currentColor" stroke-width="3" d="M12.2 36H7a5 5 0 0 0-5 5v15.4a12.7 12.7 0 0 0 25.5 0V41a5 5 0 0 0-5.1-5.1h-5.1"></path>
    <path stroke="currentColor" stroke-width="3" d="M14.7 67.5V88A5 5 0 1 0 25 88v-3.8c0-5 4-9 9-9h8.8"></path>
    <rect width="45" height="39" x="49.5" y="7.5" stroke="currentColor" stroke-width="3" rx="2"></rect>
    <path stroke="currentColor" stroke-width="3" d="M50 22.5h44"></path>
    <path stroke="currentColor" stroke-linecap="round" stroke-width="3" d="M62 2v12m0 16h-4m4 8h-4m16-8h-4m4 8h-4m16-8h-4m4 8h-4m0-36v12"></path>
  </svg>
</div>

I forslaget er farge satt via en custom property med alternativ verdi som fallback var(--navno-pictogram, #EEE). En slik løsning gjør det mulig å overstyre "standard" verdi for én eller mange piktogrammer ved å oppdatere verdien på et parent element med style="--navno-pictogram: #FAD".