Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add custom icon helper #970

Closed
wants to merge 2 commits into from
Closed

Add custom icon helper #970

wants to merge 2 commits into from

Conversation

stramel
Copy link
Contributor

@stramel stramel commented Sep 24, 2019 •
edited

Fixes #477

@jacobwgillespie Let me know your thoughts and I will clean this up and get it ready to be merged.

Interested to hear everyone's opinion!

Here is a playground to test it. https://codesandbox.io/s/react-typescript-playground-jrj1k

Usage:

import styled from 'styled-components'
import { createIcon } from 'styled-icons'

const Icon = createIcon(
  <svg viewBox="0 0 24 24" fill="currentColor">
		<path
			fill="currentColor"
			d="M13 4c-3.859 0-7 3.141-7 7 0 .763.127 1.495.354 2.183l-.749.75-.511.512-1.008 1.045a3.076 3.076 0 0 0-.891 2.185 3.134 3.134 0 0 0 3.13 3.131c.757 0 1.504-.278 2.104-.784l.064-.055.061-.061 1.512-1.51.75-.749A6.983 6.983 0 0 0 13 18c3.859 0 7-3.141 7-7s-3.141-7-7-7zm0 12c-2.757 0-5-2.243-5-5s2.243-5 5-5 5 2.243 5 5-2.243 5-5 5zm0-9c-2.205 0-4 1.794-4 4s1.795 4 4 4 4-1.794 4-4-1.795-4-4-4zm0 7a3.001 3.001 0 0 1 0-6 3.001 3.001 0 0 1 0 6z"
		/>
	</svg>
)

const Chrome = createIcon(
  <svg
		viewBox="0 0 24 24"
		height="48"
		width="48"
		fill="currentColor"
		xmlns="http://www.w3.org/2000/svg">
		<title>Chrome icon</title>
		<path d="M10.742 2.04c-1.404.183-3.06.808-4.281 1.626-1.01.664-2.397 2.02-2.309 2.251.193.501 3.28 5.658 3.33 5.562.038-.067.095-.279.123-.49.25-1.385 1.425-2.704 2.897-3.253.568-.221.683-.221 5.495-.27l4.917-.047-.395-.646c-1.385-2.26-3.522-3.819-6.197-4.512-.731-.193-2.81-.318-3.58-.22z" />
		<path d="M3.2 7.217c-.453.799-.983 2.415-1.107 3.358-.588 4.273 1.568 8.4 5.379 10.315.894.452 2.174.885 2.732.933l.356.029 1.674-2.838c.915-1.559 1.655-2.849 1.636-2.868-.02-.019-.231.039-.481.125-1.569.53-3.387.086-4.57-1.116-.424-.424-1.002-1.357-2.84-4.542C4.71 8.41 3.642 6.601 3.603 6.601c-.028 0-.211.279-.403.616z" />
		<path d="M15.15 8.804c1.222 1.242 1.655 3.003 1.116 4.59-.086.26-1.212 2.271-2.501 4.485-1.29 2.203-2.349 4.031-2.349 4.06 0 .115 1.328.057 2.175-.087 4.32-.74 7.573-4.002 8.265-8.276.26-1.558.164-2.925-.307-4.503l-.25-.837h-6.707l.557.568z" />
		<path d="M10.608 8.563C9.598 8.987 8.905 9.7 8.53 10.71c-.173.453-.202.713-.173 1.424.03.75.068.963.347 1.511.366.75.962 1.329 1.751 1.703.462.221.654.25 1.54.25.895 0 1.077-.029 1.559-.26.712-.326 1.462-1.077 1.79-1.79.23-.48.259-.663.259-1.558 0-.886-.029-1.078-.25-1.54-.375-.788-.952-1.386-1.703-1.75-.568-.28-.742-.318-1.56-.348-.788-.019-.99.01-1.48.213z" />
	</svg>
)

const FeatherActivity = createIcon(
	<svg
		viewBox="0 0 24 24"
		width="24"
		height="24"
		stroke="currentColor"
		strokeWidth="2"
		fill="none"
		strokeLinecap="round"
		strokeLinejoin="round">
		<polyline points="22 12 18 12 15 21 9 3 6 12 2 12" />
		{/* test */}
	</svg>
)

const StyledIcon = styled(Icon)`
  color: blue;
`

const C = () => (
  <>
    <Chrome size={100} />
    <FeatherActivity style={{ color: 'red' }} />
    <StyledIcon size="1em" />
  </>
)

This part is untested but I think you can use CRA's ReactComponent import to get the icons.

import { ReactComponent as Icon } from './my-path/icon.svg'

const CustomIcon = createIcon(<Icon />)

@stramel
Add custom icon helper
494bdca 
Update

leave ids

clean up

add metadata
@stramel stramel marked this pull request as ready for review September 24, 2019 17:24
@stramel
Copy link
Contributor Author

stramel commented Sep 24, 2019

Wasn't sure where to put the file and what all I needed to do to get it to get copied out to the build.

@stramel
Copy link
Contributor Author

stramel commented Oct 1, 2019

Ping @jacobwgillespie

@jacobwgillespie
Copy link
Member

jacobwgillespie commented Dec 3, 2019 •
edited

Note, now that we've split up styled-icons into smaller modules, @styled-icons/styled-icon exists, and we can probably move this helper into that module somehow.

@stramel
Copy link
Contributor Author

stramel commented Dec 3, 2019

I can take a look at revamping this

@stramel stramel closed this Feb 25, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Custom icons
2 participants
@stramel @jacobwgillespie