CBB - A toggle search icon using Advanced Group block and SVG Block

CBB - A simple toggle search icon

<!-- wp:boldblocks/group {"className":"","boldblocks":{"width":{"sm":{"inherit":"lg"},"md":{"inherit":"lg"},"lg":{"value":{"width":"custom","value":"36px"},"inherit":null}},"height":{},"spacing":{},"overlay":{"opacity":100},"background":{},"textAlignment":{},"verticalAlignment":{},"justifyAlignment":{},"border":{"lg":{"value":{},"inherit":null},"md":{"inherit":"lg"},"sm":{"inherit":"lg"}},"enableEllipticalRadius":false,"borderRadius":{"lg":{"value":{},"inherit":null},"md":{"inherit":"lg"},"sm":{"inherit":"lg"}},"shadows":[],"transform":{"lg":{"value":[],"inherit":null},"md":{"inherit":"lg"},"sm":{"inherit":"lg"}},"transformOrigin":{},"animations":[],"animateMultipleTimes":false,"customCSS":{"value":"selector {\n\tcursor: pointer;\n}\nselector .close,\nselector .search {\n  transition: opacity .15s;\n}\nselector .is-toggled-off .close,\nselector .search {\n  opacity: 0;\n}\nselector .is-toggled-off .search,\nselector .close {\n  opacity: 1;\n}\n","id":"IJvC6zkI5G"},"toggle":{"uniqueId":"1lvzSVz6La"}}} -->
<div class="wp-block-boldblocks-group wp-block-boldblocks-custom" style="--bb--width--sm:var(--bb--width--lg);--bb--width--md:var(--bb--width--lg);--bb--width--lg:36px"><!-- wp:boldblocks/svg-block {"blockId":"ChNhlxmBMl","content":"\u003csvg xmlns=\u0022http://www.w3.org/2000/svg\u0022 width=\u0022100\u0022 height=\u0022100\u0022 viewBox=\u00220 0 24 24\u0022 fill=\u0022none\u0022 stroke=\u0022currentColor\u0022 stroke-width=\u00221\u0022 stroke-linecap=\u0022round\u0022 stroke-linejoin=\u0022round\u0022\u003e\n  \u003cg class=\u0022search\u0022\u003e\u003ccircle cx=\u002211\u0022 cy=\u002211\u0022 r=\u00228\u0022\u003e\u003c/circle\u003e\u003cline x1=\u002221\u0022 y1=\u002221\u0022 x2=\u002216.65\u0022 y2=\u002216.65\u0022\u003e\u003c/line\u003e\u003c/g\u003e\n  \u003cg class=\u0022close\u0022\u003e\u003cline x1=\u002218\u0022 y1=\u00226\u0022 x2=\u00226\u0022 y2=\u002218\u0022\u003e\u003c/line\u003e\u003cline x1=\u00226\u0022 y1=\u00226\u0022 x2=\u002218\u0022 y2=\u002218\u0022\u003e\u003c/line\u003e\u003c/g\u003e  \n\u003c/svg\u003e","boldblocks":{"width":{"sm":{"inherit":"lg"},"md":{"inherit":"lg"},"lg":{"value":{"width":"custom","value":""},"inherit":null}}}} -->
<div class="wp-block-boldblocks-svg-block js-toggle-search is-toggled-off"><a class="wp-block-boldblocks-svg-block__inner" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round">
  <g class="search"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></g>
  <g class="close"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></g>  
</svg></a></div>
<!-- /wp:boldblocks/svg-block --></div>
<!-- /wp:boldblocks/group -->

Requirements: WordPress Gutenberg (5.9+) + a block-based theme such as Twenty Twenty Two
Plugins: CBB, SVG Block
Paste as plain text