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.

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

pkp/pkp-lib#9626 Migrate icons to svg #414

Draft
wants to merge 2 commits into
base: main
Choose a base branch
from
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 31 additions & 0 deletions src/components/Icon/Icon.stories.js
Original file line number Diff line number Diff line change
Expand Up @@ -59,8 +59,12 @@ export const iconGallery = {
args: {
icons: [
'Add',
'AlignCenter',
'AlignLeft',
'AlignRight',
'Announcements',
'AnonymousReview',
'ArchivedFile',
'ArrowLeft',
'ArrowRight',
'AttachFile',
Expand All @@ -77,26 +81,37 @@ export const iconGallery = {
'ChevronRight',
'ChevronUp',
'Clock',
'Comment',
'Complete',
'Dashboard',
'Declined',
'DefaultDocument',
'DecreaseTextSize',
'Desktop',
'DisableUser',
'Download',
'Dropdown',
'Dropup',
'Edit',
'Email',
'EmailOpened',
'Error',
'Expand',
'FileAudio',
'FileCode',
'FileDoc',
'FileEpub',
'FileExcel',
'FileHtml',
'FileImage',
'FilePdf',
'FilePowerpoint',
'FileText',
'FileVideo',
'FileZip',
'Filter',
'Globe',
'Hdd',
'Help',
'History',
'InProgress',
Expand All @@ -105,31 +120,47 @@ export const iconGallery = {
'Institutes',
'Issues',
'Italics',
'Lock',
'LoginAs',
'MergeUser',
'Minus',
'Money',
'MoreOptions',
'MySubmissions',
'NavDoi',
'NavAdmin',
'New',
'Notifications',
'NotVisible',
'OpenReview',
'Orcid',
'Overdue',
'Paste',
'Payment',
'Photo',
'Pin',
'Print',
'Publication',
'Question',
'ReadRecommendation',
'ReinstateReviewer',
'ReviewAssignments',
'ReviewRequestDeclined',
'ReviewSent',
'Search',
'Settings',
'Sitemap',
'Sort',
'Star',
'StarTicked',
'Statistics',
'Tools',
'Underline',
'Unlock',
'Upload',
'Url',
'UsefulTips',
'User',
'View',
'Workflow',
],
Expand Down
62 changes: 62 additions & 0 deletions src/components/Icon/Icon.vue
Original file line number Diff line number Diff line change
Expand Up @@ -37,8 +37,12 @@
<script setup>
import {defineProps, computed} from 'vue';
import Add from './icons/Add.vue';
import AlignCenter from './icons/AlignCenter.vue';
import AlignLeft from './icons/AlignLeft.vue';
import AlignRight from './icons/AlignRight.vue';
import Announcements from './icons/Announcements.vue';
import AnonymousReview from './icons/AnonymousReview.vue';
import ArchivedFile from './icons/ArchivedFile.vue';
import ArrowLeft from './icons/ArrowLeft.vue';
import ArrowRight from './icons/ArrowRight.vue';
import AttachFile from './icons/AttachFile.vue';
Expand All @@ -55,26 +59,37 @@ import ChevronLeft from './icons/ChevronLeft.vue';
import ChevronRight from './icons/ChevronRight.vue';
import ChevronUp from './icons/ChevronUp.vue';
import Clock from './icons/Clock.vue';
import Comment from './icons/Comment.vue';
import Complete from './icons/Complete.vue';
import Dashboard from './icons/Dashboard.vue';
import Declined from './icons/Declined.vue';
import DecreaseTextSize from './icons/DecreaseTextSize.vue';
import Desktop from './icons/Desktop.vue';
import DisableUser from './icons/DisableUser.vue';
import Download from './icons/Download.vue';
import Dropdown from './icons/Dropdown.vue';
import Dropup from './icons/Dropup.vue';
import Edit from './icons/Edit.vue';
import Email from './icons/Email.vue';
import EmailOpened from './icons/EmailOpened.vue';
import Error from './icons/Error.vue';
import Expand from './icons/Expand.vue';
import DefaultDocument from './icons/DefaultDocument.vue';
import FileAudio from './icons/FileAudio.vue';
import FileCode from './icons/FileCode.vue';
import FileDoc from './icons/FileDoc.vue';
import FileEpub from './icons/FileEpub.vue';
import FileExcel from './icons/FileExcel.vue';
import FileHtml from './icons/FileHtml.vue';
import FileImage from './icons/FileImage.vue';
import FilePdf from './icons/FilePdf.vue';
import FilePowerpoint from './icons/FilePowerpoint.vue';
import FileText from './icons/FileText.vue';
import FileVideo from './icons/FileVideo.vue';
import FileZip from './icons/FileZip.vue';
import Filter from './icons/Filter.vue';
import Globe from './icons/Globe.vue';
import Hdd from './icons/Hdd.vue';
import Help from './icons/Help.vue';
import History from './icons/History.vue';
import InProgress from './icons/InProgress.vue';
Expand All @@ -83,38 +98,58 @@ import InsertContent from './icons/InsertContent.vue';
import Institutes from './icons/Institutes.vue';
import Issues from './icons/Issues.vue';
import Italics from './icons/Italics.vue';
import Lock from './icons/Lock.vue';
import LoginAs from './icons/LoginAs.vue';
import MergeUser from './icons/MergeUser.vue';
import Minus from './icons/Minus.vue';
import Money from './icons/Money.vue';
import MoreOptions from './icons/MoreOptions.vue';
import MySubmissions from './icons/MySubmissions.vue';
import NavDoi from './icons/NavDoi.vue';
import NavAdmin from './icons/NavAdmin.vue';
import New from './icons/New.vue';
import Notifications from './icons/Notifications.vue';
import NotVisible from './icons/NotVisible.vue';
import OpenReview from './icons/OpenReview.vue';
import Orcid from './icons/Orcid.vue';
import Overdue from './icons/Overdue.vue';
import Paste from './icons/Paste.vue';
import Payment from './icons/Payment.vue';
import Photo from './icons/Photo.vue';
import Pin from './icons/Pin.vue';
import Print from './icons/Print.vue';
import Publication from './icons/Publication.vue';
import Question from './icons/Question.vue';
import ReadRecommendation from './icons/ReadRecommendation.vue';
import ReinstateReviewer from './icons/ReinstateReviewer.vue';
import ReviewAssignments from './icons/ReviewAssignments.vue';
import ReviewRequestDeclined from './icons/ReviewRequestDeclined.vue';
import ReviewSent from './icons/ReviewSent.vue';
import Search from './icons/Search.vue';
import Settings from './icons/Settings.vue';
import Sitemap from './icons/Sitemap.vue';
import Sort from './icons/Sort.vue';
import Star from './icons/Star.vue';
import StarTicked from './icons/StarTicked.vue';
import Statistics from './icons/Statistics.vue';
import Tools from './icons/Tools.vue';
import Underline from './icons/Underline.vue';
import Unlock from './icons/Unlock.vue';
import Upload from './icons/Upload.vue';
import Url from './icons/Url.vue';
import UsefulTips from './icons/UsefulTips.vue';
import User from './icons/User.vue';
import View from './icons/View.vue';
import Workflow from './icons/Workflow.vue';

const svgIcons = {
Add,
AlignCenter,
AlignLeft,
AlignRight,
Announcements,
AnonymousReview,
ArchivedFile,
ArrowLeft,
ArrowRight,
AttachFile,
Expand All @@ -131,26 +166,37 @@ const svgIcons = {
ChevronRight,
ChevronUp,
Clock,
Comment,
Complete,
Dashboard,
Declined,
DefaultDocument,
DecreaseTextSize,
Desktop,
DisableUser,
Download,
Dropdown,
Dropup,
Edit,
Email,
EmailOpened,
Error,
Expand,
FileAudio,
FileDoc,
FileCode,
FileEpub,
FileExcel,
FileHtml,
FileImage,
FilePdf,
FilePowerpoint,
FileText,
FileVideo,
FileZip,
Filter,
Globe,
Hdd,
Help,
History,
InProgress,
Expand All @@ -159,31 +205,47 @@ const svgIcons = {
Institutes,
Issues,
Italics,
Lock,
LoginAs,
MergeUser,
Minus,
Money,
MoreOptions,
MySubmissions,
NavDoi,
NavAdmin,
New,
Notifications,
NotVisible,
OpenReview,
Orcid,
Overdue,
Paste,
Payment,
Photo,
Pin,
Print,
Publication,
Question,
ReadRecommendation,
ReinstateReviewer,
ReviewAssignments,
ReviewRequestDeclined,
ReviewSent,
Search,
Settings,
Sitemap,
Sort,
Star,
StarTicked,
Statistics,
Tools,
Underline,
Unlock,
Upload,
Url,
UsefulTips,
User,
View,
Workflow,
};
Expand Down
32 changes: 32 additions & 0 deletions src/components/Icon/icons/AlignCenter.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
<template>
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_339_392)">
<path d="M24 0H0V24H24V0Z" fill="white" fill-opacity="0.01" />
<path
d="M21.2 8.80005H3.20001"
stroke="currentColor"
stroke-linejoin="round"
/>
<path
d="M21.2 2.80005H3.20001"
stroke="currentColor"
stroke-linejoin="round"
/>
<path
d="M21.2 14.8H3.20001"
stroke="currentColor"
stroke-linejoin="round"
/>
<path
d="M21.2 20.8H3.20001"
stroke="currentColor"
stroke-linejoin="round"
/>
</g>
<defs>
<clipPath id="clip0_339_392">
<rect width="24" height="24" fill="white" />
</clipPath>
</defs>
</svg>
</template>
17 changes: 17 additions & 0 deletions src/components/Icon/icons/AlignLeft.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
<template>
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_339_391)">
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M2 3H22V4H2V3ZM2 10H14V9H2V10ZM2 16H22V15H2V16ZM2 22H14V21H2V22Z"
fill="currentColor"
/>
</g>
<defs>
<clipPath id="clip0_339_391">
<rect width="24" height="24" fill="white" />
</clipPath>
</defs>
</svg>
</template>
17 changes: 17 additions & 0 deletions src/components/Icon/icons/AlignRight.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
<template>
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_339_393)">
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M2 3H22V4H2V3ZM10 10H22V9H10V10ZM2 16H22V15H2V16ZM10 22H22V21H10V22Z"
fill="currentColor"
/>
</g>
<defs>
<clipPath id="clip0_339_393">
<rect width="24" height="24" fill="white" />
</clipPath>
</defs>
</svg>
</template>
Loading
Loading