app/components/tailwind/icon.html.erb
<%# Using inlined svg icons so that we can set their colour based on the current text colour %>
<% case @name %>
<% when :trash %>
<svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M5 2C5 1.46957 5.21071 0.960859 5.58579 0.585786C5.96086 0.210714 6.46957 0 7 0H13C13.5304 0 14.0391 0.210714 14.4142 0.585786C14.7893 0.960859 15 1.46957 15 2V4H19C19.2652 4 19.5196 4.10536 19.7071 4.29289C19.8946 4.48043 20 4.73478 20 5C20 5.26522 19.8946 5.51957 19.7071 5.70711C19.5196 5.89464 19.2652 6 19 6H17.931L17.064 18.142C17.0281 18.6466 16.8023 19.1188 16.4321 19.4636C16.0619 19.8083 15.5749 20 15.069 20H4.93C4.42414 20 3.93707 19.8083 3.56688 19.4636C3.1967 19.1188 2.97092 18.6466 2.935 18.142L2.07 6H1C0.734784 6 0.48043 5.89464 0.292893 5.70711C0.105357 5.51957 0 5.26522 0 5C0 4.73478 0.105357 4.48043 0.292893 4.29289C0.48043 4.10536 0.734784 4 1 4H5V2ZM7 4H13V2H7V4ZM4.074 6L4.931 18H15.07L15.927 6H4.074ZM8 8C8.26522 8 8.51957 8.10536 8.70711 8.29289C8.89464 8.48043 9 8.73478 9 9V15C9 15.2652 8.89464 15.5196 8.70711 15.7071C8.51957 15.8946 8.26522 16 8 16C7.73478 16 7.48043 15.8946 7.29289 15.7071C7.10536 15.5196 7 15.2652 7 15V9C7 8.73478 7.10536 8.48043 7.29289 8.29289C7.48043 8.10536 7.73478 8 8 8ZM12 8C12.2652 8 12.5196 8.10536 12.7071 8.29289C12.8946 8.48043 13 8.73478 13 9V15C13 15.2652 12.8946 15.5196 12.7071 15.7071C12.5196 15.8946 12.2652 16 12 16C11.7348 16 11.4804 15.8946 11.2929 15.7071C11.1054 15.5196 11 15.2652 11 15V9C11 8.73478 11.1054 8.48043 11.2929 8.29289C11.4804 8.10536 11.7348 8 12 8Z" />
</svg>
<% when :edit %>
<svg width="19" height="16" viewBox="0 0 19 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M5.707 14.3136L15 6.6215L10.586 2.96789L1.293 10.66C1.16506 10.766 1.07418 10.8988 1.03 11.0441L0 15.3839L5.242 14.5313C5.418 14.4949 5.579 14.4196 5.707 14.3136ZM18 4.13831C18.3749 3.82786 18.5856 3.40686 18.5856 2.96789C18.5856 2.52892 18.3749 2.10793 18 1.79748L16.414 0.484697C16.0389 0.174346 15.5303 0 15 0C14.4697 0 13.9611 0.174346 13.586 0.484697L12 1.79748L16.414 5.45109L18 4.13831Z" />
</svg>
<% when :external %>
<svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M11.9734 0V1.83577L16.865 1.83562L9.65234 9.04869L10.9505 10.3467L18.1632 3.13399V8.02565H19.9989V0.000191485L11.9734 0Z" />
<path d="M16.3284 18.164H1.83569V3.6717H8.79011V1.83594H0V20H18.1641V11.2099H16.3284L16.3284 18.164Z" />
</svg>
<% when :share %>
<%# TODO: Share icon is not visually consistent with external link icon %>
<svg width="22" height="27" viewBox="0 0 22 27" fill="none" stroke="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M2 13.5V22.7C2 23.31 2.23705 23.895 2.65901 24.3263C3.08097 24.7577 3.65326 25 4.25 25H17.75C18.3467 25 18.919 24.7577 19.341 24.3263C19.7629 23.895 20 23.31 20 22.7V13.5M15.5 6.6L11 2M11 2L6.5 6.6M11 2V16.95" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<% when :tick %>
<svg viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M18.6938 37C28.9679 37 37.2977 28.7167 37.2977 18.5C37.2977 8.28255 28.9679 0 18.6938 0C8.41893 0 0.0898438 8.28255 0.0898438 18.5C0.0898438 28.7167 8.41893 37 18.6938 37Z" fill="currentColor" />
<path opacity="0.2" d="M17.6886 27.9307C17.2975 27.9307 16.9258 27.7855 16.6524 27.5033L10.1707 21.0578C9.59414 20.4845 9.59414 19.5607 10.1707 18.997C10.7473 18.4333 11.6762 18.4236 12.2431 18.997L17.5418 24.2661L25.0209 14.6516C25.5193 14.0101 26.4378 13.8931 27.0732 14.3894C27.7191 14.885 27.836 15.7983 27.3377 16.4302L18.832 27.3573C18.578 27.6877 18.1869 27.8922 17.7668 27.9211C17.7474 27.9211 17.7176 27.9307 17.6886 27.9307Z" fill="#121212" />
<path d="M17.6886 25.4217C17.2975 25.4217 16.9258 25.2757 16.6524 24.9935L10.1707 18.5481C9.59414 17.9747 9.59414 17.051 10.1707 16.4872C10.7473 15.9235 11.6762 15.9139 12.2431 16.4872L17.5418 21.7563L25.0209 12.1419C25.5193 11.5004 26.4378 11.3833 27.0732 11.8796C27.7191 12.3752 27.836 13.2893 27.3377 13.9212L18.832 24.8476C18.578 25.1787 18.1869 25.3824 17.7668 25.4113C17.7474 25.4113 17.7176 25.4217 17.6886 25.4217Z" fill="white" />
</svg>
<% when :clapping %>
<svg width="142" height="132" viewBox="0 0 142 132" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="66" cy="66" r="66" fill="currentColor" />
<path d="M35.6424 63.5785C33.5401 64.8291 36.5974 96.2873 44.8167 101.843L60.4255 94.8294L79.5367 88.6495L85.1437 85.941C85.1437 85.941 92.2804 81.9819 94.9553 80.3144C97.6302 78.6494 100.18 77.1915 100.945 75.5923C101.707 73.9955 102.41 71.9135 100.497 71.3577C100.497 71.3577 108.972 66.7745 111.329 64.6902C113.686 62.6082 113.431 59.4122 111.264 58.9953C111.264 58.9953 113.559 58.3712 114.514 56.7744C115.469 55.2459 115.089 53.2322 112.731 53.0932C110.754 53.0225 108.779 53.0225 106.804 53.0932C107.952 51.7037 108.207 48.7173 104.64 48.2321C101.072 47.747 91.3232 47.9542 91.3232 47.9542L75.6518 49.8289L66.3501 51.5647L68.515 45.4554C68.515 45.4554 72.912 41.2867 73.867 37.5372C74.822 33.7878 73.5495 31.4962 71.7647 32.8151C69.9822 34.134 65.7753 37.8859 65.7753 37.8859L63.7378 38.7879C62.9483 39.134 62.246 39.6753 61.6981 40.3847L50.4863 54.4828L45.8992 61.9134L35.6424 63.5785Z" fill="#F4BE53" />
<path opacity="0.6" d="M91.4172 58.683L84.7361 59.2529L89.7154 55.9058L98.5408 54.6959C99.6451 54.5234 100.736 54.2884 101.818 53.9835L106.862 52.4162C107.342 51.8112 107.612 51.0263 107.619 50.2089L105.476 50.5639L90.0318 50.0664L79 57.4006V68.7944L95.0753 65.4473L107.809 61.4602C108.754 61.1752 109.61 60.5753 110.268 59.7504L111.339 58.468C111.339 58.468 113.607 57.8281 114.554 56.1908C114.875 55.6483 115.032 54.9934 114.995 54.3384L111.401 55.9758L91.4172 58.683Z" fill="#9A5730" />
<path opacity="0.6" d="M100.649 75.3797C101.409 73.7699 102.109 71.6685 100.203 71.1106C100.203 71.1106 108.65 66.49 111 64.3887L91.5667 68.8003L60.0681 71.3195C60.0681 71.3195 46.4156 75.5911 36 79.0221C37.4602 88.332 40.3183 98.8339 44.7012 101.845L60.2598 94.7737L79.3097 88.5434L84.8987 85.8128C84.8987 85.8128 92.0126 81.8214 94.6789 80.1403C97.3452 78.5305 99.8866 76.9895 100.649 75.3797Z" fill="#9A5730" />
<path d="M21.2685 70.8378C19.5014 72.5706 26.7006 100.44 35.7334 104.047L49.5642 93.6471L66.9337 83.3158L71.8603 79.4339C71.8603 79.4339 78.0485 73.8873 80.3233 71.7383C82.5959 69.5893 84.8064 67.5084 85.2499 65.7755C85.6911 64.0427 86.0082 61.8937 83.9861 61.7549C83.9861 61.7549 91.3117 55.3079 93.2074 52.8108C95.1009 50.3162 94.2805 47.1961 92.07 47.2667C92.07 47.2667 94.1541 46.0863 94.786 44.424C95.4179 42.7593 94.6596 40.8878 92.387 41.2334C90.447 41.5887 88.5269 42.0511 86.6378 42.6206C87.4604 41.0265 87.1434 38.0451 83.6069 38.3907C80.0705 38.7387 70.6586 41.1652 70.6586 41.1652L55.8167 46.5731L47.1652 50.3843L48.112 43.9373C48.112 43.9373 51.5863 38.8775 51.7748 34.9956C51.9654 31.1113 50.3225 29.1716 48.8702 30.8338C47.418 32.5691 44.0057 37.1446 44.0057 37.1446L42.1743 38.4613C41.4671 38.9748 40.8795 39.6611 40.4693 40.4716L32.3234 56.8338L30.3013 62.3804C29.6117 64.1887 28.4699 65.7488 27.0176 66.8853L21.2685 70.8378Z" fill="#F4BE53" />
<path opacity="0.6" d="M52 34.6426C51.312 36.3082 48.3575 39.43 46.4312 41.3026C45.3232 42.4325 44.4156 43.7499 43.7494 45.1866L41 51.1673L46.9816 50.1129L48.0123 43.6598C48.0123 43.5916 51.7948 38.5899 52 34.6426Z" fill="#9A5730" />
<path opacity="0.6" d="M86.6135 42.9433C86.8704 42.4236 87 41.8423 87 41.2539C85.8359 41.4556 83.3098 41.8613 83.1802 41.8613C83.0506 41.8613 73.7874 44.6326 68.9944 46.0515C67.064 46.5996 65.2655 47.5463 63.6853 48.8228C63.5034 48.9652 63.3465 49.1408 63.2305 49.3448C63.1214 49.5465 63.0441 49.7695 63.0168 49.9997C62.985 50.237 62.9986 50.4719 63.0555 50.702C63.1214 50.9251 63.2169 51.141 63.3601 51.3237C63.5602 51.6013 63.8263 51.8101 64.1378 51.9334L64.9154 52.2704L76.2499 46.5261L86.6135 42.9433Z" fill="#9A5730" />
<path opacity="0.6" d="M95 44.5586C94.358 46.272 92.2406 47.3693 92.2406 47.3693C91.504 47.314 90.7652 47.5065 90.1232 47.9156C87.0439 49.4943 79.2163 54.4973 79.2163 54.4973L71.0665 59.9816L68.4355 59.3656C68.1855 59.3247 67.9422 59.2284 67.7304 59.0696C67.5187 58.918 67.3452 58.7134 67.2168 58.4728C67.1065 58.2755 67.0366 58.0492 67.0119 57.8158C66.9848 57.5896 67.0051 57.349 67.0614 57.13C67.12 56.9038 67.2236 56.6992 67.3633 56.5139C67.4984 56.3358 67.6651 56.1842 67.8588 56.0735L68.8837 55.4575C70.3592 54.5599 71.8819 53.7561 73.4407 53.0582L92.1122 44.7631L95 44.5586Z" fill="#9A5730" />
<path opacity="0.6" d="M35.7403 104.047L49.5777 93.6104L66.9553 83.2422L71.8842 79.3465C71.8842 79.3465 78.0753 73.7802 80.3512 71.6235C82.6249 69.4668 84.8365 67.3785 85.2801 65.6395C85.7216 63.9005 86.0388 61.7438 84.0157 61.6046C84.0157 61.6046 91.3448 55.1345 93.2414 52.6286C93.563 52.1914 93.8225 51.698 94 51.168L85.7859 56.3875L71.1256 65.2926C69.8035 66.1206 68.7121 67.3175 67.9668 68.7707C67.2703 70.0994 66.2987 71.2205 65.1231 72.0411L57.6032 76.9822L33.9702 89.297C29.8642 79.0681 23.9238 70.2313 21.2686 70.859C19.5007 72.4588 26.7033 100.427 35.7403 104.047Z" fill="#9A5730" />
<path d="M71 41.2539C70.4939 41.3712 70.1788 41.4288 70.1788 41.4288L60 44.5588" stroke="#9A5730" stroke-linecap="round" stroke-linejoin="round" />
<path d="M44 98.5389L49.5341 94.2425L66.8273 83.7512L71.7323 79.8084C71.7323 79.8084 77.8933 74.1746 80.1581 71.9918C82.4208 69.809 84.6216 67.6954 85.0631 65.9353C85.5024 64.1752 85.818 61.9925 83.8048 61.8515C83.8048 61.8515 91.0983 55.3007 92.9856 52.7668C93.394 52.2601 93.6964 51.647 93.8598 50.9919C94.0231 50.3294 94.0408 49.6323 93.9282 48.9648" stroke="#9A5730" stroke-linecap="round" stroke-linejoin="round" />
<path d="M85 43.457L76.16 46.373L64 52.2702" stroke="#9A5730" stroke-linecap="round" stroke-linejoin="round" />
<path d="M90 47.8633C86.9923 49.4335 79.3443 54.41 79.3443 54.41L71.3861 59.8652L68 62.1847" stroke="#9A5730" stroke-linecap="round" stroke-linejoin="round" />
<path d="M83 62.1836C81.8129 62.6537 76.5008 66.6244 76.5008 66.6244L71 70.9968" stroke="#9A5730" stroke-linecap="round" stroke-linejoin="round" />
<path d="M40 52.2697C41.7885 51.3272 44.2115 50.6534 46 50.0664" stroke="#9A5730" stroke-linecap="round" stroke-linejoin="round" />
<path d="M23 70.998C27.5289 74.6428 38.3831 94.7639 35.5285 101.844" stroke="#9A5730" stroke-linecap="round" stroke-linejoin="round" />
<path d="M105 53.3711L92 54.4727" stroke="#9A5730" stroke-linecap="round" stroke-linejoin="round" />
<path d="M110 58.8789C107.115 59.6517 85 65.4888 85 65.4888" stroke="#9A5730" stroke-linecap="round" stroke-linejoin="round" />
<path d="M98 72.0996C93.2452 73.6711 85.4535 76.2879 85.4535 76.2879L84 78.7095" stroke="#9A5730" stroke-linecap="round" stroke-linejoin="round" />
<path d="M75 86.4207V76.5059" stroke="#9A5730" stroke-linecap="round" stroke-linejoin="round" />
<path d="M70 23.6263L73 6" stroke="#414860" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
<path d="M88 28.0337L93 21.4238" stroke="#414860" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
<path d="M101 31.3387L114 20.3223" stroke="#414860" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
<path d="M126.771 61.1604L141 57.7695" stroke="#414860" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<% when :warning %>
<%# TODO: Don't hardcode warning colour %>
<svg width="47" height="47" viewBox="0 0 47 47" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M21.768 3C22.5378 1.66666 24.4623 1.66667 25.2321 3L42.1195 32.25C42.8893 33.5833 41.9271 35.25 40.3875 35.25H6.6125C5.0729 35.25 4.11065 33.5833 4.88045 32.25L21.768 3Z" fill="currentColor" />
<path d="M25.488 14.754L25.048 24.39H22.232L21.792 14.754H25.488ZM23.64 26.392C24.1973 26.392 24.6667 26.59 25.048 26.986C25.444 27.3673 25.642 27.8293 25.642 28.372C25.642 28.9293 25.444 29.406 25.048 29.802C24.6667 30.1833 24.1973 30.374 23.64 30.374C23.0973 30.374 22.628 30.1833 22.232 29.802C21.8507 29.406 21.66 28.9293 21.66 28.372C21.66 27.8293 21.8507 27.3673 22.232 26.986C22.628 26.59 23.0973 26.392 23.64 26.392Z" fill="#B90000" />
</svg>
<% when :dismiss %>
<%# TODO: Not sure how this icon relates to the dismiss cross on the hamburger menu %>
<svg width="23" height="23" viewBox="0 0 23 23" fill="none" stroke="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M1 1L22 22" stroke-width="2" />
<path d="M1 22L22 1" stroke-width="2" />
</svg>
<% else %>
<% raise "Unexpected name #{@name}" %>
<% end %>