search

tomusborne / generateblocks

GenerateBlocks is a small collection of lightweight WordPress blocks that can accomplish nearly anything.
https://generateblocks.com
198 stars 24 forks source link

GP 2.0 - Toolbar Icons - inserting things #1405

Closed diggeddy closed 1 month ago

diggeddy commented 1 month ago

Description

A set of new icons for inserting things Covering: Outer Container Inner Container Caption Accordion Tab No Results Pagination

Screenshot 2024-10-29 at 15 28 18 
// add outer container
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false">
    <path d="M21.375,22L17.625,22L17.625,20.75L20.75,20.75L20.75,17.625L22,17.625L22,21.375C22,21.72 21.72,22 21.375,22ZM9.188,20.75L14.813,20.75L14.813,22L9.188,22L9.188,20.75ZM6.375,22L2.625,22C2.282,22 2,21.718 2,21.375L2,17.625L3.25,17.625L3.25,20.75L6.375,20.75L6.375,22ZM2,9.187L3.25,9.187L3.25,14.812L2,14.812L2,9.187ZM3.25,6.375L2,6.375L2,2.625C2,2.28 2.28,2 2.625,2L6.375,2L6.375,3.25L3.25,3.25L3.25,6.375ZM9.188,2L14.813,2L14.813,3.25L9.188,3.25L9.188,2ZM22,6.375L20.75,6.375L20.75,3.25L17.625,3.25L17.625,2L21.375,2C21.72,2 22,2.28 22,2.625L22,6.375ZM20.75,9.187L22,9.187L22,14.812L20.75,14.812L20.75,9.187Z" style="fill-rule:nonzero;"/>
    <path d="M14,6.5L16.5,6.5L16.5,4L17.5,4L17.5,6.5L20,6.5L20,7.5L17.5,7.5L17.5,10L16.5,10L16.5,7.5L14,7.5L14,6.5Z"/>
</svg>

// add inner container
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false">
    <path d="M22.006,22.006L20.665,22.006L20.665,17.629L22.006,17.629L22.006,22.006ZM22.006,14.814L20.665,14.814L20.665,9.185L22.006,9.185L22.006,14.814ZM22.006,6.372L20.672,6.372L20.672,3.328L17.628,3.328L17.628,1.994L21.38,1.994C21.725,1.994 22.006,2.274 22.006,2.619L22.006,6.372ZM6.371,1.994L6.371,3.331L1.994,3.331L1.994,1.994L6.371,1.994ZM14.814,3.331L9.186,3.331L9.186,1.994L14.814,1.994L14.814,3.331Z" style="fill-opacity:0.5;"/>
    <path d="M14,6.5L16.5,6.5L16.5,4L17.5,4L17.5,6.5L20,6.5L20,7.5L17.5,7.5L17.5,10L16.5,10L16.5,7.5L14,7.5L14,6.5Z"/>
    <path d="M1.993,9L7.701,9L7.701,10.268L1.993,10.268L1.993,9ZM14.993,13.439L13.725,13.439L13.725,10.268L10.554,10.268L10.554,9L14.359,9C14.709,9 14.993,9.284 14.993,9.634L14.993,13.439ZM13.725,16.292L14.993,16.292L14.993,22L13.725,22L13.725,16.292Z" style="fill-rule:nonzero;"/>
</svg>

// add caption 
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false">
    <path d="M6.743,14.365C6.113,14.365 5.493,14.971 5.493,15.865C5.493,16.758 6.113,17.365 6.743,17.365C6.972,17.363 7.195,17.29 7.38,17.154C7.466,17.09 7.571,17.055 7.678,17.055C7.953,17.055 8.178,17.281 8.178,17.555C8.178,17.72 8.097,17.874 7.962,17.967C7.608,18.224 7.181,18.363 6.743,18.365C5.44,18.365 4.493,17.181 4.493,15.865C4.493,14.549 5.44,13.365 6.743,13.365C7.218,13.365 7.654,13.528 8.011,13.798C8.136,13.893 8.209,14.04 8.209,14.197C8.209,14.471 7.983,14.697 7.709,14.697C7.6,14.697 7.494,14.661 7.407,14.595C7.217,14.447 6.984,14.366 6.743,14.365ZM10.493,15.865C10.493,14.971 11.113,14.365 11.743,14.365C11.983,14.365 12.21,14.446 12.407,14.595C12.492,14.655 12.594,14.688 12.698,14.688C12.972,14.688 13.198,14.462 13.198,14.188C13.198,14.036 13.129,13.893 13.011,13.798C12.648,13.518 12.202,13.366 11.743,13.365C10.44,13.365 9.493,14.549 9.493,15.865C9.493,17.181 10.44,18.365 11.743,18.365C12.181,18.363 12.608,18.224 12.962,17.967C13.097,17.874 13.178,17.72 13.178,17.555C13.178,17.281 12.953,17.055 12.678,17.055C12.571,17.055 12.466,17.09 12.38,17.154C12.195,17.29 11.972,17.363 11.743,17.365C11.113,17.365 10.493,16.758 10.493,15.865ZM1.993,12.115C1.993,10.88 3.009,9.865 4.243,9.865L13.743,9.865C14.978,9.865 15.993,10.88 15.993,12.115L15.993,19.615C15.993,20.849 14.978,21.865 13.743,21.865L4.243,21.865C3.009,21.865 1.993,20.849 1.993,19.615L1.993,12.115ZM4.243,10.865C3.557,10.865 2.993,11.429 2.993,12.115L2.993,19.615C2.993,20.3 3.557,20.865 4.243,20.865L13.743,20.865C14.429,20.865 14.993,20.3 14.993,19.615L14.993,12.115C14.993,11.429 14.429,10.865 13.743,10.865L4.243,10.865Z" style="fill-rule:nonzero;"/>
    <path d="M22.006,22.006L20.665,22.006L20.665,17.629L22.006,17.629L22.006,22.006ZM22.006,14.814L20.665,14.814L20.665,9.185L22.006,9.185L22.006,14.814ZM22.006,6.372L20.672,6.372L20.672,3.328L17.628,3.328L17.628,1.994L21.38,1.994C21.725,1.994 22.006,2.274 22.006,2.619L22.006,6.372ZM6.371,1.994L6.371,3.331L1.994,3.331L1.994,1.994L6.371,1.994ZM14.814,3.331L9.186,3.331L9.186,1.994L14.814,1.994L14.814,3.331Z" style="fill-opacity:0.5;"/>
    <path d="M14,6.5L16.5,6.5L16.5,4L17.5,4L17.5,6.5L20,6.5L20,7.5L17.5,7.5L17.5,10L16.5,10L16.5,7.5L14,7.5L14,6.5Z"/>
</svg>

// add accordion
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false">
    <path d="M22.006,22.006L20.665,22.006L20.665,17.629L22.006,17.629L22.006,22.006ZM22.006,14.814L20.665,14.814L20.665,9.185L22.006,9.185L22.006,14.814ZM22.006,6.372L20.672,6.372L20.672,3.328L17.628,3.328L17.628,1.994L21.38,1.994C21.725,1.994 22.006,2.274 22.006,2.619L22.006,6.372ZM6.371,1.994L6.371,3.331L1.994,3.331L1.994,1.994L6.371,1.994ZM14.814,3.331L9.186,3.331L9.186,1.994L14.814,1.994L14.814,3.331Z" style="fill-opacity:0.5;"/>
    <path d="M14,6.5L16.5,6.5L16.5,4L17.5,4L17.5,6.5L20,6.5L20,7.5L17.5,7.5L17.5,10L16.5,10L16.5,7.5L14,7.5L14,6.5Z"/>
    <path d="M15.556,14.99L2.432,14.99C2.192,14.99 1.994,14.791 1.994,14.55C1.994,14.55 1.994,14.55 1.995,14.55L1.995,10.462C1.995,10.219 2.191,10.022 2.432,10.022L15.556,10.022C15.797,10.022 15.993,10.219 15.993,10.462L15.993,14.55C15.993,14.793 15.797,14.99 15.556,14.99ZM2.869,14.11L15.118,14.11L15.118,10.901L2.869,10.901L2.869,14.11ZM15.556,21.865L2.432,21.865C2.191,21.865 1.994,21.666 1.994,21.425C1.994,21.183 2.191,20.985 2.432,20.985L15.556,20.985C15.796,20.985 15.994,21.184 15.994,21.425C15.994,21.666 15.796,21.865 15.556,21.865L15.556,21.865ZM15.556,19.648L2.432,19.648C2.192,19.648 1.995,19.45 1.995,19.209C1.995,18.968 2.192,18.77 2.432,18.77L15.556,18.77C15.796,18.77 15.993,18.968 15.993,19.209C15.993,19.45 15.796,19.648 15.556,19.648L15.556,19.648ZM15.556,17.433L2.432,17.433C2.192,17.433 1.995,17.235 1.995,16.994C1.995,16.753 2.192,16.554 2.432,16.554L15.556,16.554C15.796,16.554 15.993,16.753 15.993,16.994C15.993,17.235 15.796,17.433 15.556,17.433L15.556,17.433Z" style="fill-rule:nonzero;"/>
    <path d="M13.074,13.448C12.978,13.448 12.886,13.41 12.817,13.341L11.724,12.243L12.239,11.725L13.074,12.564L13.911,11.725L14.426,12.243L13.333,13.341C13.264,13.41 13.171,13.448 13.074,13.448Z" style="fill-rule:nonzero;"/>
</svg>

// add tab
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false">
    <path d="M22.006,22.006L20.665,22.006L20.665,17.629L22.006,17.629L22.006,22.006ZM22.006,14.814L20.665,14.814L20.665,9.185L22.006,9.185L22.006,14.814ZM22.006,6.372L20.672,6.372L20.672,3.328L17.628,3.328L17.628,1.994L21.38,1.994C21.725,1.994 22.006,2.274 22.006,2.619L22.006,6.372ZM6.371,1.994L6.371,3.331L1.994,3.331L1.994,1.994L6.371,1.994ZM14.814,3.331L9.186,3.331L9.186,1.994L14.814,1.994L14.814,3.331Z" style="fill-opacity:0.5;"/>
    <path d="M14,6.5L16.5,6.5L16.5,4L17.5,4L17.5,6.5L20,6.5L20,7.5L17.5,7.5L17.5,10L16.5,10L16.5,7.5L14,7.5L14,6.5Z"/>
    <path d="M13.361,15.744L4.634,15.744C4.396,15.744 4.2,15.94 4.2,16.178C4.2,16.416 4.396,16.612 4.634,16.612L13.361,16.612C13.599,16.612 13.795,16.416 13.795,16.178C13.795,15.94 13.606,15.744 13.361,15.744ZM13.361,17.866L4.634,17.866C4.396,17.866 4.2,18.062 4.2,18.3C4.2,18.538 4.396,18.734 4.634,18.734L13.361,18.734C13.599,18.734 13.795,18.538 13.795,18.3L13.795,18.293C13.795,18.058 13.602,17.866 13.368,17.866L13.361,17.866ZM4.193,14.056C4.193,14.294 4.389,14.49 4.627,14.49L13.354,14.49C13.592,14.49 13.788,14.294 13.788,14.056C13.788,13.818 13.592,13.621 13.354,13.621L4.634,13.621L4.622,13.621C4.387,13.621 4.193,13.815 4.193,14.051L4.193,14.056Z" style="fill-rule:nonzero;"/>
    <path d="M10.748,10.491L15.994,10.491L15.994,21.43C15.994,21.668 15.798,21.865 15.56,21.865L2.428,21.865C2.19,21.865 1.994,21.668 1.994,21.423L1.994,8.292C1.994,8.054 2.19,7.858 2.428,7.858L7.247,7.858L7.247,10.491L10.748,10.491ZM6.805,11.366C6.567,11.366 6.371,11.17 6.371,10.932L6.371,8.733L2.869,8.733L2.869,20.989L15.125,20.989L15.125,11.366L6.805,11.366Z" style="fill-rule:nonzero;"/>
</svg>

// add no results
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false">
    <path d="M8.994,7.858C12.857,7.858 15.994,10.995 15.994,14.858C15.994,18.722 12.857,21.858 8.994,21.858C5.131,21.858 1.994,18.722 1.994,14.858C1.994,10.995 5.131,7.858 8.994,7.858ZM13.272,11.817L5.952,19.137C6.811,19.748 7.861,20.108 8.994,20.108C11.892,20.108 14.244,17.756 14.244,14.858C14.244,13.725 13.885,12.675 13.272,11.817ZM12.035,10.579C11.177,9.968 10.127,9.608 8.994,9.608C6.096,9.608 3.744,11.961 3.744,14.858C3.744,15.992 4.103,17.042 4.716,17.899L12.035,10.579Z"/>
    <path d="M22.006,22.006L20.665,22.006L20.665,17.629L22.006,17.629L22.006,22.006ZM22.006,14.814L20.665,14.814L20.665,9.185L22.006,9.185L22.006,14.814ZM22.006,6.372L20.672,6.372L20.672,3.328L17.628,3.328L17.628,1.994L21.38,1.994C21.725,1.994 22.006,2.274 22.006,2.619L22.006,6.372ZM6.371,1.994L6.371,3.331L1.994,3.331L1.994,1.994L6.371,1.994ZM14.814,3.331L9.186,3.331L9.186,1.994L14.814,1.994L14.814,3.331Z" style="fill-opacity:0.5;"/>
    <path d="M14,6.5L16.5,6.5L16.5,4L17.5,4L17.5,6.5L20,6.5L20,7.5L17.5,7.5L17.5,10L16.5,10L16.5,7.5L14,7.5L14,6.5Z"/>
</svg>

// add pagination
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false">
    <path d="M14.456,14.429C14.652,14.429 14.842,14.463 15.027,14.53C15.212,14.597 15.376,14.698 15.519,14.832C15.662,14.967 15.777,15.135 15.864,15.337C15.95,15.538 15.994,15.771 15.994,16.034C15.994,16.354 15.928,16.634 15.796,16.875C15.665,17.116 15.491,17.319 15.275,17.484C15.06,17.65 14.812,17.773 14.531,17.854C14.251,17.935 13.963,17.976 13.666,17.976C13.413,17.976 13.161,17.954 12.909,17.909C12.657,17.864 12.413,17.794 12.178,17.699L12.472,16.791C12.522,16.819 12.591,16.847 12.678,16.875C12.765,16.903 12.863,16.931 12.972,16.959C13.081,16.987 13.193,17.009 13.308,17.026C13.423,17.043 13.537,17.051 13.649,17.051C13.834,17.051 14.003,17.028 14.157,16.98C14.311,16.932 14.443,16.865 14.552,16.778C14.662,16.691 14.747,16.59 14.809,16.476C14.87,16.361 14.901,16.236 14.901,16.102C14.901,15.933 14.866,15.792 14.796,15.677C14.726,15.562 14.629,15.471 14.506,15.404C14.383,15.337 14.234,15.289 14.061,15.261C13.887,15.233 13.699,15.219 13.497,15.219L13.027,15.219L13.027,14.622L14.439,12.899L12.312,12.899L12.312,11.975L15.742,11.975L15.742,12.739L14.262,14.429L14.456,14.429Z"/>
    <path d="M4.697,16.934L5.958,16.934L5.958,17.858L2.369,17.858L2.369,16.934L3.655,16.934L3.655,13.261L2.545,14.109L2.041,13.437L3.957,11.975L4.697,11.975L4.697,16.934Z"/>
    <path d="M10.917,17.858L7.168,17.858L7.168,17.043C7.235,16.987 7.32,16.913 7.42,16.82C7.521,16.728 7.635,16.623 7.761,16.505C7.887,16.387 8.02,16.258 8.16,16.118C8.3,15.978 8.437,15.833 8.572,15.681C8.762,15.468 8.929,15.275 9.072,15.101C9.215,14.928 9.333,14.764 9.425,14.61C9.518,14.456 9.586,14.304 9.631,14.156C9.676,14.007 9.698,13.855 9.698,13.698C9.698,13.586 9.673,13.476 9.623,13.37C9.572,13.263 9.502,13.169 9.412,13.088C9.323,13.007 9.215,12.943 9.089,12.895C8.963,12.847 8.824,12.823 8.673,12.823C8.471,12.823 8.288,12.854 8.122,12.916C7.957,12.978 7.785,13.081 7.605,13.227L7.168,12.454C7.404,12.286 7.666,12.144 7.954,12.029C8.243,11.914 8.575,11.857 8.95,11.857C9.191,11.857 9.422,11.89 9.644,11.958C9.865,12.025 10.061,12.124 10.232,12.256C10.403,12.388 10.539,12.552 10.64,12.748C10.741,12.944 10.791,13.171 10.791,13.429C10.791,13.608 10.776,13.775 10.745,13.929C10.714,14.083 10.666,14.237 10.602,14.391C10.537,14.545 10.453,14.703 10.35,14.866C10.246,15.028 10.121,15.205 9.976,15.396C9.864,15.541 9.742,15.688 9.61,15.837C9.478,15.985 9.348,16.127 9.219,16.261C9.09,16.396 8.963,16.522 8.837,16.64C8.711,16.757 8.597,16.855 8.496,16.934L10.917,16.934L10.917,17.858Z"/>
    <path d="M22.006,22.006L20.665,22.006L20.665,17.629L22.006,17.629L22.006,22.006ZM22.006,14.814L20.665,14.814L20.665,9.185L22.006,9.185L22.006,14.814ZM22.006,6.372L20.672,6.372L20.672,3.328L17.628,3.328L17.628,1.994L21.38,1.994C21.725,1.994 22.006,2.274 22.006,2.619L22.006,6.372ZM6.371,1.994L6.371,3.331L1.994,3.331L1.994,1.994L6.371,1.994ZM14.814,3.331L9.186,3.331L9.186,1.994L14.814,1.994L14.814,3.331Z" style="fill-opacity:0.5;"/>
    <path d="M14,6.5L16.5,6.5L16.5,4L17.5,4L17.5,6.5L20,6.5L20,7.5L17.5,7.5L17.5,10L16.5,10L16.5,7.5L14,7.5L14,6.5Z"/>
</svg>