[{"data":1,"prerenderedAt":202},["ShallowReactive",2],{"sanity-F1we6DxVvAKMPl09y3iwWdJ0F2OIe9ZkBhgMzNAahdk":3,"sanity-c0kSj3GJBkWsBNTeBSX3JIX2ThpFJNa5opEbSZJm2UQ":37},{"data":4,"sourceMap":14},[5,10],{"slug":6,"title":9},{"_type":7,"current":8},"slug","website-laten-maken-in-linden","Linden",{"slug":11,"title":13},{"_type":7,"current":12},"website-laten-maken-in-leuven","Leuven",{"documents":15,"paths":21,"mappings":24},[16,19],{"_id":17,"_type":18},"14d1e007-3170-41d2-ad7b-0d25f9fb6d25","location",{"_id":20,"_type":18},"efd1d7fc-38fa-48f6-aefe-c5cf53bf4b7b",[22,23],"$['slug']","$['title']",{"$[0]['slug']":25,"$[0]['title']":30,"$[1]['slug']":33,"$[1]['title']":35},{"source":26,"type":29},{"document":27,"path":27,"type":28},0,"documentValue","value",{"source":31,"type":29},{"document":27,"path":32,"type":28},1,{"source":34,"type":29},{"document":32,"path":27,"type":28},{"source":36,"type":29},{"document":32,"path":32,"type":28},{"data":38,"sourceMap":143},{"_createdAt":39,"_id":40,"_translations":41,"body":52,"categories":118,"intro":135,"language":43,"mainImage":136,"shorts":141,"slug":142,"title":46},"2022-10-22T16:16:59Z","bb73af09-2d0c-4345-b425-dd6e3838aba4",[42,47],{"language":43,"slug":44,"title":46},"en-BE",{"_type":7,"current":45},"how-to-use-svgs-as-react-components-in-next-js","How to use SVGs as React Components in Next.js",{"language":48,"slug":49,"title":51},"nl-BE",{"_type":7,"current":50},"hoe-gebruik-je-svg-s-als-react-components-in-next-js","Hoe gebruik je SVG's als React components in Next.js",[53,64,69,77,94,98,106,110],{"_key":54,"_type":55,"children":56,"markDefs":62,"style":63},"dfb48281bcee","block",[57],{"_key":58,"_type":59,"marks":60,"text":61},"9227e5a0ea12","span",[],"SVGR turns SVGs into React components that you can easily import in your app. This way you have cleaner files and still have the ability to apply easy CSS on it!\n\nGet started:",[],"normal",{"_key":65,"_type":66,"code":67,"language":68},"421ec249d7b0","code","pnpm install --save-dev @svgr/webpack","text",{"_key":70,"_type":55,"children":71,"markDefs":76,"style":63},"5bfadee5d6fb",[72],{"_key":73,"_type":59,"marks":74,"text":75},"693543e923390",[],"",[],{"_key":78,"_type":55,"children":79,"markDefs":93,"style":63},"d878d00389c3",[80,84,89],{"_key":81,"_type":59,"marks":82,"text":83},"039616568a5a",[],"Then update your ",{"_key":85,"_type":59,"marks":86,"text":88},"762f7da6d8d3",[87],"strong","next.config.js",{"_key":90,"_type":59,"marks":91,"text":92},"2512c2d15de1",[],":",[],{"_key":95,"_type":66,"code":96,"language":97},"1ee67a86f87f","module.exports = {\n  webpack(config) {\n    config.module.rules.push({\n      test:/\\.svg$/i, issuer:/\\.[jt]sx?$/,\n      use:['@svgr/webpack']\n    })\n\n    return config\n  },\n}","javascript",{"_key":99,"_type":55,"children":100,"markDefs":105,"style":63},"d30ce2adfdaf",[101],{"_key":102,"_type":59,"marks":103,"text":104},"6ec7fcb03dad",[],"\nNow you can do the following:",[],{"_key":107,"_type":66,"code":108,"language":109},"3ddf76351ed8","import Logo from 'assets/logo.svg';\n\nconst Header = () => {\n  return (\n    \u003Cheader>\n      \u003CLogo className=\"max-w-[195px]\" aria-label=\"Homepage\" />\n    \u003C/header>\n  );\n};\n\nexport default Header;","jsx",{"_key":111,"_type":55,"children":112,"markDefs":117,"style":63},"79509e119d5b",[113],{"_key":114,"_type":59,"marks":115,"text":116},"19ae0386f933",[],"\nThat's it!",[],[119,125,130],{"_createdAt":120,"_id":121,"_rev":122,"_type":123,"_updatedAt":120,"title":124},"2022-10-16T12:54:35Z","d8367402-7de7-47dc-89eb-36d75c128cf8","52CpX3tZR7hi7So0BrUrcb","category","Frontend",{"_createdAt":126,"_id":127,"_rev":128,"_type":123,"_updatedAt":126,"title":129},"2022-10-22T16:18:01Z","deafb868-5f33-4a22-bd93-dda5a18b4a37","ARbfCGLRTMa9wvh7OsHgyG","React",{"_createdAt":131,"_id":132,"_rev":133,"_type":123,"_updatedAt":131,"title":134},"2022-10-22T16:18:11Z","51fbb7b6-36bf-4798-ae30-60db65559acf","HzNEBHtDMFxcvwNiBa9jXv","Next.js","Using @svgr/webpack to easy import your svgs as a React component!",{"_type":137,"asset":138},"image",{"_ref":139,"_type":140},"image-6dbb1605e602f587cc9c928f1ba5a4d58419a3cd-2048x1280-jpg","reference",null,{"_type":7,"current":45},{"documents":144,"paths":152,"mappings":160},[145,146,149,150,151],{"_id":132,"_type":123},{"_id":147,"_type":148},"9892008a-0082-4339-95d3-e9cd9a8df384","post",{"_id":40,"_type":148},{"_id":121,"_type":123},{"_id":127,"_type":123},[153,154,155,156,157,158,159,22,23],"$","$['_createdAt']","$['_id']","$['body']","$['intro']","$['language']","$['mainImage']",{"$['_createdAt']":161,"$['_id']":164,"$['_translations'][0]['language']":166,"$['_translations'][0]['slug']":169,"$['_translations'][0]['title']":172,"$['_translations'][1]['language']":175,"$['_translations'][1]['slug']":177,"$['_translations'][1]['title']":179,"$['body']":181,"$['categories'][0]":184,"$['categories'][1]":186,"$['categories'][2]":189,"$['intro']":191,"$['language']":193,"$['mainImage']":195,"$['slug']":198,"$['title']":200},{"source":162,"type":29},{"document":163,"path":32,"type":28},2,{"source":165,"type":29},{"document":163,"path":163,"type":28},{"source":167,"type":29},{"document":163,"path":168,"type":28},5,{"source":170,"type":29},{"document":163,"path":171,"type":28},7,{"source":173,"type":29},{"document":163,"path":174,"type":28},8,{"source":176,"type":29},{"document":32,"path":168,"type":28},{"source":178,"type":29},{"document":32,"path":171,"type":28},{"source":180,"type":29},{"document":32,"path":174,"type":28},{"source":182,"type":29},{"document":163,"path":183,"type":28},3,{"source":185,"type":29},{"document":183,"path":27,"type":28},{"source":187,"type":29},{"document":188,"path":27,"type":28},4,{"source":190,"type":29},{"document":27,"path":27,"type":28},{"source":192,"type":29},{"document":163,"path":188,"type":28},{"source":194,"type":29},{"document":163,"path":168,"type":28},{"source":196,"type":29},{"document":163,"path":197,"type":28},6,{"source":199,"type":29},{"document":163,"path":171,"type":28},{"source":201,"type":29},{"document":163,"path":174,"type":28},1760905763783]