Skip to content

Instantly share code, notes, and snippets.

View arcticicestudio's full-sized avatar
❄️
Development is now taking place @svengreb and @nordtheme

Arctic Ice Studio arcticicestudio

❄️
Development is now taking place @svengreb and @nordtheme
View GitHub Profile
@arcticicestudio
arcticicestudio / README.md
Created November 7, 2018 13:56
A SVGR v3 component template to inject the `ref` prop and spreaded `props` to SVG fragments/fractals.

Motivation

A [SVGR][] v3 component template to inject the ref prop and spreaded props to SVG fragments/fractals which are SVG files that contain [SVG elements][mdn-svg-elements-ref] not wrapped into <svg> allowing to compose these in JSX / React components.

When the extendProps option of SVGR v3 is enabled all props are added to the root <svg> element. Enabling the ref option also adds the ref={svgRef} using [React's (16.3+) forwardRef API][react-docs-forward-ref]. Unfortunately this only applies to root <svg> elements but not to any other element that represents the root of the SVG file and therefore prevents to compose fragments / fractals to a single SVG for use cases like animations and styling with CSS-in-JSS techniques. The reason is that when props are not spreaded to the root element necessary props like className and any other (custom) prop are not set on the element. Another use case is the fact that awesome animations libraries like [react-pose][] are [reliant on a f

@arcticicestudio
arcticicestudio / AuroraBorealis.jsx
Created March 25, 2018 20:25
Nord Website Design Draft Concept: Parallax Hero
import React from "react";
const AuroraBorealis = props => (
<svg viewBox="0 0 1920 1000" {...props}>
<defs>
<linearGradient id="gleam" x1="50%" y1="0%" x2="50%" y2="100%">
<stop offset="0%" stopColor="#8fbcbb">
<animate
attributeName="stop-color"
values="#8fbcbb; #88c0d0; #8fbcbb"

Keybase proof

I hereby claim:

  • I am arcticicestudio on github.
  • I am arcticicestudio (https://keybase.io/arcticicestudio) on keybase.
  • I have a public key ASBl45wouh8J3W-mHTISELHbYhuLGhgyJZeNYCUR964eewo

To claim this, I am signing this object: