Skip to content

Instantly share code, notes, and snippets.

@M-Drummond
Created March 3, 2024 09:58
Show Gist options
  • Save M-Drummond/73bdccbbfe2fef3cc0a822d64092550f to your computer and use it in GitHub Desktop.
Save M-Drummond/73bdccbbfe2fef3cc0a822d64092550f to your computer and use it in GitHub Desktop.
AlpineJS - Define SVG Icons
import Alpine from 'alpinejs'
export default Alpine.store('icons', {
close: `<svg width="42" height="36" viewBox="0 0 42 36" fill="none" xmlns="http://www.w3.org/2000/svg">
<line x1="10.6464" y1="27.8597" x2="31.8596" y2="6.6465" stroke="currentColor"/>
<line x1="10.7471" y1="7.03982" x2="31.9603" y2="28.253" stroke="currentColor"/>
</svg>`,
open: `
<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
<line y1="9.5" x2="30" y2="9.5" stroke="currentColor"/>
<line y1="14.5" x2="30" y2="14.5" stroke="currentColor"/>
<line y1="19.5" x2="30" y2="19.5" stroke="currentColor"/>
<line y1="24.5" x2="30" y2="24.5" stroke="currentColor"/>
</svg>`,
swiperPrev: `
<svg width="10" height="14" viewBox="0 0 10 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9 1L2 7L9 13" stroke="currentColor" stroke-width="1.5"/>
</svg>
`,
swiperNext: `<svg width="10" height="14" viewBox="0 0 10 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 13L8 7L0.999999 1" stroke="currentColor" stroke-width="1.5"/>
</svg>
`,
arrow: `<svg width="15" height="16" viewBox="0 0 15 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 8.28943L7.71053 15L14.4211 8.28943" stroke="currentColor"/>
<path d="M7.71045 0V14.6053" stroke="currentColor"/>
</svg>
`,
cancel: `
<svg width="9" height="9" viewBox="0 0 9 9" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 1L8 8" stroke="currentColor"/>
<path d="M1 8L8 1" stroke="currentColor"/>
</svg>
`,
social: {
ig: `<svg width="27" height="27" viewBox="0 0 27 27" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16.1871 13.5C16.1871 15.0533 14.9376 16.3125 13.3963 16.3125C11.8549 16.3125 10.6054 15.0533 10.6054 13.5C10.6054 11.9468 11.8549 10.6875 13.3963 10.6875C14.9376 10.6875 16.1871 11.9468 16.1871 13.5ZM20.2115 10.0905C20.2517 10.9803 20.2603 11.247 20.2603 13.5C20.2603 15.753 20.2519 16.0198 20.2115 16.9095C20.1743 17.7323 20.0378 18.1787 19.9232 18.4762C19.7714 18.87 19.59 19.1512 19.2968 19.4465C19.0038 19.7417 18.725 19.9247 18.334 20.0777C18.039 20.1932 17.5957 20.3307 16.7793 20.3682C15.8966 20.4087 15.6317 20.4175 13.396 20.4175C11.1603 20.4175 10.8956 20.409 10.0127 20.3682C9.19628 20.3307 8.75321 20.1932 8.458 20.0777C8.06727 19.9247 7.78819 19.742 7.4952 19.4465C7.20222 19.1512 7.02088 18.8702 6.86905 18.4762C6.75444 18.179 6.618 17.7323 6.58079 16.9095C6.5406 16.0198 6.53191 15.753 6.53191 13.5C6.53191 11.247 6.54035 10.9803 6.58079 10.0905C6.618 9.26775 6.75444 8.82125 6.86905 8.52375C7.02088 8.13 7.20222 7.84875 7.4952 7.5535C7.78819 7.25825 8.06703 7.07525 8.458 6.92225C8.75296 6.80675 9.19628 6.66925 10.0127 6.63175C10.8956 6.59125 11.1603 6.5825 13.396 6.5825C15.6317 6.5825 15.8964 6.591 16.7793 6.63175C17.5957 6.66925 18.0388 6.80675 18.334 6.92225C18.7247 7.07525 19.0038 7.25825 19.2968 7.5535C19.5898 7.84875 19.7714 8.12975 19.9232 8.52375C20.0378 8.821 20.1743 9.26775 20.2115 10.0905ZM17.6957 13.5C17.6957 11.107 15.7709 9.16725 13.3963 9.16725C11.0216 9.16725 9.0968 11.107 9.0968 13.5C9.0968 15.893 11.0216 17.8328 13.3963 17.8328C15.7709 17.8328 17.6957 15.893 17.6957 13.5ZM18.8704 8.996C18.8704 8.43675 18.4206 7.9835 17.8656 7.9835C17.3107 7.9835 16.8609 8.43675 16.8609 8.996C16.8609 9.55525 17.3107 10.0085 17.8656 10.0085C18.4206 10.0085 18.8704 9.55525 18.8704 8.996ZM26.7925 13.5C26.7925 20.9558 20.7947 27 13.3963 27C5.9978 27 0 20.9558 0 13.5C0 6.04425 5.9978 0 13.3963 0C20.7947 0 26.7925 6.04425 26.7925 13.5ZM21.7689 13.5C21.7689 11.2085 21.7592 10.9213 21.7186 10.0213C21.6779 9.12325 21.5365 8.50975 21.3293 7.97325C21.1152 7.4185 20.8289 6.948 20.3635 6.47875C19.8979 6.00975 19.431 5.72125 18.8805 5.5055C18.3479 5.297 17.7394 5.15425 16.8483 5.11325C15.9552 5.07225 15.6701 5.0625 13.3963 5.0625C11.1224 5.0625 10.8373 5.07225 9.94424 5.11325C9.05314 5.15425 8.44435 5.29675 7.91173 5.5055C7.36124 5.72125 6.89436 6.00975 6.42871 6.47875C5.96332 6.94775 5.67704 7.41825 5.46294 7.97325C5.25605 8.51 5.11439 9.12325 5.07371 10.0213C5.03302 10.9213 5.02335 11.2085 5.02335 13.5C5.02335 15.7915 5.03302 16.0788 5.07371 16.9788C5.11439 17.8768 5.2558 18.4903 5.46294 19.0268C5.67704 19.5815 5.96332 20.052 6.42871 20.5212C6.89411 20.9902 7.36099 21.2788 7.91173 21.4945C8.44435 21.703 9.05289 21.8457 9.94424 21.8867C10.8373 21.9277 11.1224 21.9375 13.3963 21.9375C15.6701 21.9375 15.9552 21.9277 16.8483 21.8867C17.7394 21.8457 18.3482 21.7033 18.8805 21.4945C19.431 21.2788 19.8979 20.9902 20.3635 20.5212C20.8289 20.052 21.1152 19.5815 21.3293 19.0268C21.5362 18.49 21.6779 17.8768 21.7186 16.9788C21.7592 16.0788 21.7689 15.7915 21.7689 13.5Z" fill="currentColor"/>
</svg>
`,
fb: `
<svg width="28" height="27" viewBox="0 0 28 27" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14.1892 0C6.79077 0 0.792969 6.04425 0.792969 13.5C0.792969 20.9558 6.79077 27 14.1892 27C21.5877 27 27.5855 20.9558 27.5855 13.5C27.5855 6.04425 21.5877 0 14.1892 0ZM17.9092 8.394H16.6623C15.4338 8.394 15.0508 9.16225 15.0508 9.95025V11.8195H17.7933L17.355 14.7H15.0508V21.6635C14.5475 21.743 14.0314 21.7845 13.5058 21.7845C12.9801 21.7845 12.4641 21.743 11.9607 21.6635V14.7H9.44993V11.8195H11.9607V9.624C11.9607 7.1265 13.4371 5.747 15.6958 5.747C16.7777 5.747 17.9094 5.94175 17.9094 5.94175V8.394H17.9092Z" fill="currentColor"/>
</svg>
`,
li: `
<svg width="28" height="27" viewBox="0 0 28 27" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13.9822 0C6.58374 0 0.585938 6.04425 0.585938 13.5C0.585938 20.9558 6.58374 27 13.9822 27C21.3806 27 27.3784 20.9558 27.3784 13.5C27.3784 6.04425 21.3809 0 13.9822 0ZM10.5113 19.5322H7.78767V10.71H10.5113V19.5322ZM9.15011 9.5045C8.27638 9.5045 7.57158 8.79225 7.57158 7.91425C7.57158 7.03625 8.27613 6.32425 9.15011 6.32425C10.0241 6.32425 10.7272 7.03675 10.7272 7.91425C10.7272 8.79175 10.0206 9.5045 9.15011 9.5045ZM20.7019 19.5322H17.9812V15.242C17.9812 14.219 17.9639 12.9027 16.5674 12.9027C15.171 12.9027 14.9356 14.0178 14.9356 15.1688V19.5322H12.2179V10.71H14.8259V11.916H14.8631C15.2258 11.2225 16.1137 10.491 17.4374 10.491C20.1923 10.491 20.7014 12.3178 20.7014 14.6938V19.5322H20.7019Z" fill="currentColor"/>
</svg>`
}
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment