SVG에서 필요한 아이콘만 사용
12341 단어 babelifyReactbrowserify
모티프
웹에서 많이 사용하는 아이콘은 최대 몇 가지에 불과하지만, 펜트 어워썸과 머티리얼 디자인 아이콘 등'늘어나는 웹 글꼴'을 사용하면 어떨까 싶어 리액트로 SVG 아이콘 세트를 만들어 봤다.
그 결과 아이콘이 표시되기 전에는 라그가 없었고 유형 수도 조금 줄어들어 기분이 좋았다.
데모
jsfiddle 시위 준비됐습니다.(데모 행진은 어쩔 수 없이 자바스크립트 1.7)
아이콘은 SVGMaterial Design Icons를 사용합니다.
실용적인 사용 방법
아래와 같이 모듈로 나뉘어 브라우저ify와babelify를 사용하면 편리합니다.
icon.jsimport React from 'react';
const Icon = (props) => (
<svg style={{width: '24px', height: '24px', verticalAlign: 'bottom'}} viewBox="0 0 24 24">
<path fill={props.color || "#000000"} d={props.d} />
</svg>
);
export const Image = (props) => (
<Icon {...props} d="M8.5,13.5L11,16.5L14.5,12L19,18H5M21,19V5C21,3.89 20.1,3 19,3H5A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19Z" />
);
export const Heart = (props) => (
<Icon {...props} d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z" />
);
export const Ban = (props) => (
<svg style={{width: '24px', height: '24px', verticalAlign: 'bottom'}} viewBox="0 0 24 24">
<path fill={props.color || "#000000"} d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z" />
<path fill={props.color || "#ff0000"} d="M12,0A12,12 0 0,1 24,12A12,12 0 0,1 12,24A12,12 0 0,1 0,12A12,12 0 0,1 12,0M12,2A10,10 0 0,0 2,12C2,14.4 2.85,16.6 4.26,18.33L18.33,4.26C16.6,2.85 14.4,2 12,2M12,22A10,10 0 0,0 22,12C22,9.6 21.15,7.4 19.74,5.67L5.67,19.74C7.4,21.15 9.6,22 12,22Z" />
</svg>
);
Icon을 사용하는 곳은 다음과 같은 인상이다.(Bootstrap4 사용)
script.jsimport React from 'react';
import ReactDOM from 'react-dom';
import * as Icon from './icon';
const MdiButtons = React.createClass({
render() {
return (
<div>
<button type="button" className="btn btn-link"><Icon.Image /></button>
<button type="button" className="btn btn-link"><Icon.Heart color="pink" /></button>
<button type="button" className="btn btn-danger-outline"><Icon.Ban /> Ban</button>
</div>
);
}
});
ReactDOM.render(<MdiButtons />, document.getElementById('container'));
참조)<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css">
</head>
<body>
<div id="container"></div>
<script src="bundle.js"></script>
</body>
</html>
다음은 browserify의 bundle입니다.js의 예를 준비하다.$ browserify script.js -o bundle.js -t [ babelify --presets [ es2015 react ] ](glop 등을 사용하면 더욱 실용적이다.)
끝말
원래 준비한'사용법'과 맞지 않기 때문에 관리에 참고하는 시간이 늘어날 수 있다.
다만, 이를 뛰어넘는 장점, 예를 들어 본 기사와 같은'아이콘 스택'은 하기 쉽다는 등의 맞춤형 구성이 매력이라서 코드를 조금만 더 정제하면 더 편리하다고 생각한다.
그리고 CSS를 이상하게 오염시키지 않는 것도 좋아해요.
Reference
이 문제에 관하여(SVG에서 필요한 아이콘만 사용), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/momunchu/items/0a42d8dd24a4012f970b
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
jsfiddle 시위 준비됐습니다.(데모 행진은 어쩔 수 없이 자바스크립트 1.7)
아이콘은 SVGMaterial Design Icons를 사용합니다.
실용적인 사용 방법
아래와 같이 모듈로 나뉘어 브라우저ify와babelify를 사용하면 편리합니다.
icon.jsimport React from 'react';
const Icon = (props) => (
<svg style={{width: '24px', height: '24px', verticalAlign: 'bottom'}} viewBox="0 0 24 24">
<path fill={props.color || "#000000"} d={props.d} />
</svg>
);
export const Image = (props) => (
<Icon {...props} d="M8.5,13.5L11,16.5L14.5,12L19,18H5M21,19V5C21,3.89 20.1,3 19,3H5A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19Z" />
);
export const Heart = (props) => (
<Icon {...props} d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z" />
);
export const Ban = (props) => (
<svg style={{width: '24px', height: '24px', verticalAlign: 'bottom'}} viewBox="0 0 24 24">
<path fill={props.color || "#000000"} d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z" />
<path fill={props.color || "#ff0000"} d="M12,0A12,12 0 0,1 24,12A12,12 0 0,1 12,24A12,12 0 0,1 0,12A12,12 0 0,1 12,0M12,2A10,10 0 0,0 2,12C2,14.4 2.85,16.6 4.26,18.33L18.33,4.26C16.6,2.85 14.4,2 12,2M12,22A10,10 0 0,0 22,12C22,9.6 21.15,7.4 19.74,5.67L5.67,19.74C7.4,21.15 9.6,22 12,22Z" />
</svg>
);
Icon을 사용하는 곳은 다음과 같은 인상이다.(Bootstrap4 사용)
script.jsimport React from 'react';
import ReactDOM from 'react-dom';
import * as Icon from './icon';
const MdiButtons = React.createClass({
render() {
return (
<div>
<button type="button" className="btn btn-link"><Icon.Image /></button>
<button type="button" className="btn btn-link"><Icon.Heart color="pink" /></button>
<button type="button" className="btn btn-danger-outline"><Icon.Ban /> Ban</button>
</div>
);
}
});
ReactDOM.render(<MdiButtons />, document.getElementById('container'));
참조)<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css">
</head>
<body>
<div id="container"></div>
<script src="bundle.js"></script>
</body>
</html>
다음은 browserify의 bundle입니다.js의 예를 준비하다.$ browserify script.js -o bundle.js -t [ babelify --presets [ es2015 react ] ](glop 등을 사용하면 더욱 실용적이다.)
끝말
원래 준비한'사용법'과 맞지 않기 때문에 관리에 참고하는 시간이 늘어날 수 있다.
다만, 이를 뛰어넘는 장점, 예를 들어 본 기사와 같은'아이콘 스택'은 하기 쉽다는 등의 맞춤형 구성이 매력이라서 코드를 조금만 더 정제하면 더 편리하다고 생각한다.
그리고 CSS를 이상하게 오염시키지 않는 것도 좋아해요.
Reference
이 문제에 관하여(SVG에서 필요한 아이콘만 사용), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/momunchu/items/0a42d8dd24a4012f970b
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
import React from 'react';
const Icon = (props) => (
<svg style={{width: '24px', height: '24px', verticalAlign: 'bottom'}} viewBox="0 0 24 24">
<path fill={props.color || "#000000"} d={props.d} />
</svg>
);
export const Image = (props) => (
<Icon {...props} d="M8.5,13.5L11,16.5L14.5,12L19,18H5M21,19V5C21,3.89 20.1,3 19,3H5A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19Z" />
);
export const Heart = (props) => (
<Icon {...props} d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z" />
);
export const Ban = (props) => (
<svg style={{width: '24px', height: '24px', verticalAlign: 'bottom'}} viewBox="0 0 24 24">
<path fill={props.color || "#000000"} d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z" />
<path fill={props.color || "#ff0000"} d="M12,0A12,12 0 0,1 24,12A12,12 0 0,1 12,24A12,12 0 0,1 0,12A12,12 0 0,1 12,0M12,2A10,10 0 0,0 2,12C2,14.4 2.85,16.6 4.26,18.33L18.33,4.26C16.6,2.85 14.4,2 12,2M12,22A10,10 0 0,0 22,12C22,9.6 21.15,7.4 19.74,5.67L5.67,19.74C7.4,21.15 9.6,22 12,22Z" />
</svg>
);
import React from 'react';
import ReactDOM from 'react-dom';
import * as Icon from './icon';
const MdiButtons = React.createClass({
render() {
return (
<div>
<button type="button" className="btn btn-link"><Icon.Image /></button>
<button type="button" className="btn btn-link"><Icon.Heart color="pink" /></button>
<button type="button" className="btn btn-danger-outline"><Icon.Ban /> Ban</button>
</div>
);
}
});
ReactDOM.render(<MdiButtons />, document.getElementById('container'));
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css">
</head>
<body>
<div id="container"></div>
<script src="bundle.js"></script>
</body>
</html>
원래 준비한'사용법'과 맞지 않기 때문에 관리에 참고하는 시간이 늘어날 수 있다.
다만, 이를 뛰어넘는 장점, 예를 들어 본 기사와 같은'아이콘 스택'은 하기 쉽다는 등의 맞춤형 구성이 매력이라서 코드를 조금만 더 정제하면 더 편리하다고 생각한다.
그리고 CSS를 이상하게 오염시키지 않는 것도 좋아해요.
Reference
이 문제에 관하여(SVG에서 필요한 아이콘만 사용), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/momunchu/items/0a42d8dd24a4012f970b텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
