SPSTRAP Document API

Icon package

Spstrap Icon Font

<div class="sp--desc" theme="xl" gap="xl">
                                <p>
                                    <i class="sp--icon" ico="facebook"></i>
                                    <i class="sp--icon" ico="kakao"></i>
                                    <i class="sp--icon" ico="kakaotalk"></i>
                                    <i class="sp--icon" ico="kakaostory"></i>
                                    <i class="sp--icon" ico="naver"></i>
                                    <i class="sp--icon" ico="line"></i>
                                    <i class="sp--icon" ico="google"></i>
                                    <i class="sp--icon" ico="apple"></i>
                                    <i class="sp--icon" ico="youtube"></i>
                                    <i class="sp--icon" ico="vimeo"></i>
                                    <i class="sp--icon" ico="instagram"></i>
                                </p>
                                <p>
                                     <i class="sp--icon" ico="alphabet-a"></i>
                                     <i class="sp--icon" ico="alphabet-q"></i>
                                     <i class="sp--icon" ico="string"></i>
                                     <i class="sp--icon" ico="close"></i>
                                     <i class="sp--icon" ico="close-thin"></i>
                                     <i class="sp--icon" ico="circle"></i>
                                     <i class="sp--icon" ico="ellipsis"></i>
                                     <i class="sp--icon" ico="hexagon"></i>
                                     <i class="sp--icon" ico="search"></i>
                                     <i class="sp--icon" ico="shape"></i>
                                     <i class="sp--icon" ico="square"></i>
                                     <i class="sp--icon" ico="star"></i>
                                     <i class="sp--icon" ico="star-fill"></i>
                                     <i class="sp--icon" ico="triangle"></i>
                                     <i class="sp--icon" ico="cart"></i>
                                     <i class="sp--icon" ico="cart-thin"></i>
                                     <i class="sp--icon" ico="bag"></i>
                                     <i class="sp--icon" ico="bag-thin"></i>
                                     <i class="sp--icon" ico="plus"></i>
                                     <i class="sp--icon" ico="minus"></i>
                                     <i class="sp--icon" ico="truck"></i>
                                     <i class="sp--icon" ico="user"></i>
                                     <i class="sp--icon" ico="user-thin"></i>
                                     <i class="sp--icon" ico="user-circle"></i>
                                     <i class="sp--icon" ico="reload"></i>
                                     <i class="sp--icon" ico="trash"></i>
                                     <i class="sp--icon" ico="heart"></i>
                                     <i class="sp--icon" ico="heart-fill"></i>
                                     <i class="sp--icon" ico="clock"></i>
                                     <i class="sp--icon" ico="clock-thin"></i>
                                     <i class="sp--icon" ico="clock-fill"></i>
                                     <i class="sp--icon" ico="bookmark"></i>
                                     <i class="sp--icon" ico="check"></i>
                                     <i class="sp--icon" ico="arrow"></i>
                                     <i class="sp--icon" ico="arrow-thin"></i>
                                     <i class="sp--icon" ico="pc"></i>
                                     <i class="sp--icon" ico="mobile"></i>
                                     <i class="sp--icon" ico="card"></i>
                                     <i class="sp--icon" ico="giftcard"></i>
                                     <i class="sp--icon" ico="email"></i>
                                     <i class="sp--icon" ico="message"></i>
                                     <i class="sp--icon" ico="article"></i>
                                     <i class="sp--icon" ico="bell"></i>
                                     <i class="sp--icon" ico="phone"></i>
                                     <i class="sp--icon" ico="customer"></i>
                                     <i class="sp--icon" ico="security"></i>
                                     <i class="sp--icon" ico="eye"></i>
                                     <i class="sp--icon" ico="box"></i>
                                     <i class="sp--icon" ico="box-hand"></i>
                                     <i class="sp--icon" ico="box-three"></i>
                                     <i class="sp--icon" ico="calendar"></i>
                                     <i class="sp--icon" ico="image"></i>
                                     <i class="sp--icon" ico="camera"></i>
                                     <i class="sp--icon" ico="pencil"></i>
                                     <i class="sp--icon" ico="coin"></i>
                                     <i class="sp--icon" ico="coin-many"></i>
                                     <i class="sp--icon" ico="list"></i>
                                     <i class="sp--icon" ico="bracket"></i>
                                     <i class="sp--icon" ico="home"></i>
                                     <i class="sp--icon" ico="headset"></i>
                                     <i class="sp--icon" ico="keyboard"></i>
                                     <i class="sp--icon" ico="square-four"></i>
                                     <i class="sp--icon" ico="square-v-list"></i>
                                     <i class="sp--icon" ico="square-h-list"></i>
                                     <i class="sp--icon" ico="caret"></i>
                                     <i class="sp--icon" ico="warning"></i>
                                     <i class="sp--icon" ico="warning-fill"></i>
                                     <i class="sp--icon" ico="mic"></i>
                                     <i class="sp--icon" ico="disk"></i>
                                     <i class="sp--icon" ico="switch-off"></i>
                                     <i class="sp--icon" ico="switch-on"></i>
                                     <i class="sp--icon" ico="switch-on" scale="x2"></i>
                                     <i class="sp--icon" ico="switch-on" scale="x3"></i>
                                     <i class="sp--icon" ico="switch-on" scale="x4"></i>
                                     <i class="sp--icon" ico="switch-on" scale="x5"></i>
                                     <i class="sp--icon" ico="number-14"></i>
                                     <i class="sp--icon" ico="number-19"></i>
                                     <i class="sp--icon" ico="checkbox"></i>
                                     <i class="sp--icon" ico="question"></i>
                                     <i class="sp--icon" ico="required"></i>
                                     <i class="sp--icon" ico="smile"></i>
                                </p>
                            </div>

Preview icon - xs

<style>
                                .sample {
                                    width: 100px;
                                    vertical-align: top;
                                    background-color: #ccc;
                                    margin: 5px;
                                }
                            </style>
                            
                            
                            <img src="../../image/form/select-arrow.svg" class="sample" /></img>
                            <img src="../../image/form/select-arrow-reverse.svg" class="sample" /></img>
                            
                            <img src="../../image/social/facebook.svg" class="sample" /></img>
                            <img src="../../image/social/kakao.svg" class="sample" /></img>
                            <img src="../../image/social/kakaotalk.svg" class="sample" /></img>
                            <img src="../../image/social/kakaostory.svg" class="sample" /></img>
                            <img src="../../image/social/naver.svg" class="sample" /></img>
                            <img src="../../image/social/line.svg" class="sample" /></img>
                            <img src="../../image/social/google.svg" class="sample" /></img>
                            <img src="../../image/social/apple.svg" class="sample" /></img>
                            <img src="../../image/social/youtube.svg" class="sample" /></img>
                            <img src="../../image/social/vimeo.svg" class="sample" /></img>
                            <img src="../../image/social/instagram.svg" class="sample" /></img>

<img src="../../image/base/alphabet-a.svg" class="sample" /></img>
                            <img src="../../image/base/alphabet-q.svg" class="sample" /></img>
                            <img src="../../image/base/string.svg" class="sample" /></img>
                            <img src="../../image/base/close.svg" class="sample" /></img>
                            <img src="../../image/base/close-thin.svg" class="sample" /></img>
                            <img src="../../image/base/circle.svg" class="sample" /></img>
                            <img src="../../image/base/ellipsis.svg" class="sample" /></img>
                            <img src="../../image/base/hexagon.svg" class="sample" /></img>
                            <img src="../../image/base/search.svg" class="sample" /></img>
                            <img src="../../image/base/shape.svg" class="sample" /></img>
                            <img src="../../image/base/square.svg" class="sample" /></img>
                            <img src="../../image/base/star.svg" class="sample" /></img>
                            <img src="../../image/base/triangle.svg" class="sample" /></img>
                            <img src="../../image/base/cart.svg" class="sample" /></img>
                            <img src="../../image/base/cart-thin.svg" class="sample" /></img>
                            <img src="../../image/base/bag.svg" class="sample" /></img>
                            <img src="../../image/base/bag-thin.svg" class="sample" /></img>
                            <img src="../../image/base/plus.svg" class="sample" /></img>
                            <img src="../../image/base/minus.svg" class="sample" /></img>
                            <img src="../../image/base/truck.svg" class="sample" /></img>
                            <img src="../../image/base/user.svg" class="sample" /></img>
                            <img src="../../image/base/user-thin.svg" class="sample" /></img>
                            <img src="../../image/base/user-circle.svg" class="sample" /></img>
                            <img src="../../image/base/reload.svg" class="sample" /></img>
                            <img src="../../image/base/trash.svg" class="sample" /></img>
                            <img src="../../image/base/heart.svg" class="sample" /></img>
                            <img src="../../image/base/heart-fill.svg" class="sample" /></img>
                            <img src="../../image/base/clock.svg" class="sample" /></img>
                            <img src="../../image/base/clock-thin.svg" class="sample" /></img>
                            <img src="../../image/base/clock-fill.svg" class="sample" /></img>
                            <img src="../../image/base/bookmark.svg" class="sample" /></img>
                            <img src="../../image/base/check.svg" class="sample" /></img>
                            <img src="../../image/base/arrow.svg" class="sample" /></img>
                            <img src="../../image/base/arrow-thin.svg" class="sample" /></img>
                            <img src="../../image/base/pc.svg" class="sample" /></img>
                            <img src="../../image/base/mobile.svg" class="sample" /></img>
                            <img src="../../image/base/card.svg" class="sample" /></img>
                            <img src="../../image/base/giftcard.svg" class="sample" /></img>
                            <img src="../../image/base/email.svg" class="sample" /></img>
                            <img src="../../image/base/message.svg" class="sample" /></img>
                            <img src="../../image/base/article.svg" class="sample" /></img>
                            <img src="../../image/base/bell.svg" class="sample" /></img>
                            <img src="../../image/base/phone.svg" class="sample" /></img>
                            <img src="../../image/base/customer.svg" class="sample" /></img>
                            <img src="../../image/base/security.svg" class="sample" /></img>
                            <img src="../../image/base/eye.svg" class="sample" /></img>
                            <img src="../../image/base/box.svg" class="sample" /></img>
                            <img src="../../image/base/box-hand.svg" class="sample" /></img>
                            <img src="../../image/base/box-three.svg" class="sample" /></img>
                            <img src="../../image/base/calendar.svg" class="sample" /></img>
                            <img src="../../image/base/image.svg" class="sample" /></img>
                            <img src="../../image/base/camera.svg" class="sample" /></img>
                            <img src="../../image/base/pencil.svg" class="sample" /></img>
                            <img src="../../image/base/coin.svg" class="sample" /></img>
                            <img src="../../image/base/coin-many.svg" class="sample" /></img>
                            <img src="../../image/base/list.svg" class="sample" /></img>
                            <img src="../../image/base/bracket.svg" class="sample" /></img>
                            <img src="../../image/base/home.svg" class="sample" /></img>
                            <img src="../../image/base/headset.svg" class="sample" /></img>
                            <img src="../../image/base/keyboard.svg" class="sample" /></img>
                            <img src="../../image/base/square-four.svg" class="sample" /></img>
                            <img src="../../image/base/square-v-list.svg" class="sample" /></img>
                            <img src="../../image/base/square-h-list.svg" class="sample" /></img>
                            <img src="../../image/base/caret.svg" class="sample" /></img>
                            <img src="../../image/base/warning.svg" class="sample" /></img>
                            <img src="../../image/base/warning-fill.svg" class="sample" /></img>
                            <img src="../../image/base/mic.svg" class="sample" /></img>
                            <img src="../../image/base/disk.svg" class="sample" /></img>
                            <img src="../../image/base/switch-off.svg" class="sample" /></img>
                            <img src="../../image/base/switch-on.svg" class="sample" /></img>

font icon : material *

<style>
                                /*
                                ** material icon을 사용하려면
                                ** /_sp/css/fontface.css 파일에 아래의 import 필요
                                */
                                @import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400&family=Noto+Sans+KR:wght@400[&family=Material+Icons+Round]&display=swap');
                            </style>
                            <div class="sp--document-message">
                                아이콘은 기본적인 svg 아이콘만 지원한다.<br />
                                부트스트랩 아이콘을 참조할지는 고민을 해야봐야 할 문제다.<br />
                                구글 메테리얼 아이콘을 사용하는것을 고려하자. 기본값은 '사용안함' 이다.
                                <hr class="sp--hr" space="md" />
                                <a href="https://material.io/resources/icons/?style=round" class="sp--btn sp--popup-btn" theme="box-dark-round" scale="md">아이콘 종류 확인</a>
                                <a href="https://codepen.io/sosuke/pen/Pjoqqp" class="sp--btn sp--popup-btn" theme="box-dark-round" scale="md">필터 컨버터</a>
                            </div>
                            <a href="#!" class="sp--btn" theme="box-dark-round" scale="lg"><i class="sp--material">add</i> lg</a>
                            <a href="#!" class="sp--btn" theme="box-primary-round" scale="lg"><i class="sp--material">add</i> lg</a>
                            <a href="#!" class="sp--btn" theme="fill-dark-round-bottom" scale="2xl"><span><i class="sp--material">add</i> 2xl</span></a>
                            <br /><br />
                            <div class="sp--btn-group" fill="full">
                                <a href="#!" class="sp--btn" theme="box-dark" scale="lg">
                                    <i class="sp--material">arrow_circle_up</i>
                                    한글
                                    <i class="sp--material">keyboard_arrow_right</i>
                                </a>
                                <a href="#!" class="sp--btn" theme="box-primary" scale="lg">
                                    <i class="sp--material">arrow_circle_up</i>
                                    English
                                    <i class="sp--material">keyboard_arrow_right</i>
                                </a>
                                <a href="#!" class="sp--btn" theme="box-dark" scale="lg">
                                    <i class="sp--material">arrow_circle_up</i>
                                    buttoN
                                    <i class="sp--material">keyboard_arrow_right</i>
                                </a>
                            </div>
                            <div class="sp--btn-group" fill="full">
                                <a href="#!" class="sp--btn" theme="box-dark" scale="2xl">
                                    <i class="sp--material">arrow_circle_up</i>
                                    한글
                                    <i class="sp--material">keyboard_arrow_right</i>
                                </a>
                                <a href="#!" class="sp--btn" theme="box-primary" scale="2xl">
                                    <i class="sp--material">arrow_circle_up</i>
                                    English
                                    <i class="sp--material">keyboard_arrow_right</i>
                                </a>
                                <a href="#!" class="sp--btn" theme="box-dark" scale="2xl">
                                    <i class="sp--material">arrow_circle_up</i>
                                    buttoN
                                    <i class="sp--material">keyboard_arrow_right</i>
                                </a>
                            </div>

Super tiny & blink icon

Class

name	description
.sp--icon	아이콘 컨테이너

Attribute

name	description
ico	제작된 아이콘의 명칭
scale	xs, sm, md, lg, xl, 2xl, 3xl 폰트 사이즈에 종속됨
scale="***-x2"	x2, x3, x4, x5 폰트 사이즈의 크기를 더 크게 하는 용도