wrap plugin 폴더의 images 폴더 밑에 note 폴더 아래에 각 사이즈 별로 다음과 같은 파일을 넣는다.

크기	Law	Precedent
16
48

본 위키 사이트에 올리기 위해 각 크기 별로 이름을 달리했다. 이를테면 48픽셀 짜리는 “law48.png”라는 형식으로 저장했다.

그러나 실제 각 아이콘의 경로는 note폴더 아래에 16과 48각각의 폴더를 쓰므로 나는 폴더만 다르게 하고 이름은 똑같이 저장했다.

이하에서는 각 다른 픽셀별로 아이콘을 폴더만 다를 뿐 이름은 같은 것으로 가정하고 예시를 쓴다.

그리고 도쿠위키 문서 에디터에서 사용할 아이콘은 “toolbar”폴더에 저장되는데, 이것은 어차피 16픽셀 짜리를 사용할 것이므로

나는 toolbar 폴더에는 따로 저장하지 않았다. “toolbar”폴더에 경로를 저장하고 싶으면 취향에 따라 그렇게 해도 된다.

Wrap 플러그인의 폴더 루트 디렉토리의 style.less 파일을 건드린다.

(root)/lib/plugins/wrap/style.less

해당파일의 주석으로 된 부분에 “notes with icons”와 “notes with spans”를 건드린다.

만약 “law”라는 문법을 추가하고자 하면 “wrap_”이라는 접두어 아래에 해당 키워드를 넣으면 된다.

wrap과 precedent를 추가하면 다음과 같다.

/*____________ notes with icons ____________*/
 
/* general styles for all note divs */
div.wrap_info,
div.wrap_important,
div.wrap_alert,
div.wrap_tip,
div.wrap_help,
div.wrap_todo,
div.wrap_download,
div.wrap_law,
div.wrap_precedent {
    padding: 1em 1em .5em 70px;
    margin-bottom: 1.5em;
    min-height: 68px;
    background-position: 10px 50%;
    background-repeat: no-repeat;
    color: inherit;
    overflow: hidden;
}
/* general styles for all note spans */
span.wrap_info,
span.wrap_important,
span.wrap_alert,
span.wrap_tip,
span.wrap_help,
span.wrap_todo,
span.wrap_download,
span.wrap_law,
span.wrap_precedent {
    padding: 0 2px 0 20px;
    min-height: 20px;
    background-position: 2px 50%;
    background-repeat: no-repeat;
    color: inherit;
}

각 wrap 문법별로 아이콘을 지정하고 싶으면 아래 부분에 다음과 같은 코드를 넣으면 된다.

/*____________ law ____________*/
.wrap_law { background-color: #c2efdd; }
.wrap__dark.wrap_law { background-color: #345717; }
div.wrap_law { background-image: url(images/note/48/law.png); }
span.wrap_law { background-image: url(images/note/16/law.png); }
 
/*____________ precedent ____________*/
.wrap_precedent { background-color: #c2efdd; }
.wrap__dark.wrap_precedent { background-color: #345717; }
div.wrap_precedent { background-image: url(images/note/48/precedent.png); }
span.wrap_precedent { background-image: url(images/note/16/precedent.png); }