Skip to content

[stable8] docs: Move more icons to outline #7864

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

Draft
wants to merge 1 commit into
base: stable8
Choose a base branch
from
Draft

[stable8] docs: Move more icons to outline #7864

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
24 changes: 12 additions & 12 deletions src/components/NcAppSidebar/NcAppSidebar.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,15 +43,15 @@ Using `v-show` directly will result in usability issues due to internal focus tr
</NcAppSidebar>
</template>
<script>
import Magnify from 'vue-material-design-icons/Magnify.vue'
import Cog from 'vue-material-design-icons/Cog.vue'
import ShareVariant from 'vue-material-design-icons/ShareVariant.vue'
import IconMagnify from 'vue-material-design-icons/Magnify.vue'
import IconCogOutline from 'vue-material-design-icons/CogOutline.vue'
import IconShareVariantOutline from 'vue-material-design-icons/ShareVariantOutline.vue'

export default {
components: {
Magnify,
Cog,
ShareVariant,
IconMagnify,
IconCogOutline,
IconShareVariantOutline,
},
data() {
return {
Expand Down Expand Up @@ -112,19 +112,19 @@ export default {
subname="last edited 3 weeks ago">
<NcAppSidebarTab v-if="showTabs[0]" name="Search" id="search-tab">
<template #icon>
<Magnify :size="20" />
<IconMagnify :size="20" />
</template>
Search tab content
</NcAppSidebarTab>
<NcAppSidebarTab v-if="showTabs[1]" name="Settings" id="settings-tab">
<template #icon>
<Cog :size="20" />
<IconCogOutline :size="20" />
</template>
Settings
</NcAppSidebarTab>
<NcAppSidebarTab v-if="showTabs[2]" name="Sharing" id="share-tab">
<template #icon>
<ShareVariant :size="20" />
<IconShareVariantOutline :size="20" />
</template>
Sharing tab content
</NcAppSidebarTab>
Expand Down Expand Up @@ -205,19 +205,19 @@ export default {
:active.sync="active">
<NcAppSidebarTab name="Search" id="search-tab">
<template #icon>
<Magnify :size="20" />
<IconMagnify :size="20" />
</template>
Search tab content
</NcAppSidebarTab>
<NcAppSidebarTab name="Settings" id="settings-tab">
<template #icon>
<Cog :size="20" />
<IconCogOutline :size="20" />
</template>
Settings
</NcAppSidebarTab>
<NcAppSidebarTab name="Sharing" id="share-tab">
<template #icon>
<ShareVariant :size="20" />
<IconShareVariantOutline :size="20" />
</template>
Sharing tab content
</NcAppSidebarTab>
Expand Down
6 changes: 3 additions & 3 deletions src/components/NcAvatar/NcAvatar.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,16 +23,16 @@
<template>
<NcAvatar>
<template #icon>
<AccountMultiple :size="20" />
<IconAccountMultipleOutline :size="20" />
</template>
</NcAvatar>
</template>
<script>
import AccountMultiple from 'vue-material-design-icons/AccountMultiple.vue'
import IconAccountMultipleOutline from 'vue-material-design-icons/AccountMultipleOutline.vue'

export default {
components: {
AccountMultiple,
IconAccountMultipleOutline,
},
}
</script>
Expand Down
22 changes: 12 additions & 10 deletions src/components/NcButton/NcButton.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ It can be used with one or multiple actions.
:size="size"
variant="tertiary-no-background">
<template v-if="style.indexOf('icon') !== -1" #icon>
<Video
<IconVideoOutline
:size="20" />
</template>
<template v-if="style.indexOf('text') !== -1">Example text</template>
Expand All @@ -50,7 +50,7 @@ It can be used with one or multiple actions.
:size="size"
variant="tertiary">
<template v-if="style.indexOf('icon') !== -1" #icon>
<Video
<IconVideoOutline
:size="20" />
</template>
<template v-if="style.indexOf('text') !== -1">Example text</template>
Expand All @@ -60,7 +60,7 @@ It can be used with one or multiple actions.
:disabled="disabled"
:size="size">
<template v-if="style.indexOf('icon') !== -1" #icon>
<Video
<IconVideoOutline
:size="20" />
</template>
<template v-if="style.indexOf('text') !== -1">Example text</template>
Expand All @@ -71,7 +71,7 @@ It can be used with one or multiple actions.
:size="size"
variant="primary">
<template v-if="style.indexOf('icon') !== -1" #icon>
<Video
<IconVideo
:size="20" />
</template>
<template v-if="style.indexOf('text') !== -1">Example text</template>
Expand All @@ -86,7 +86,7 @@ It can be used with one or multiple actions.
:wide="true"
text="Example text">
<template #icon>
<Video
<IconVideoOutline
:size="20" />
</template>
Example text
Expand All @@ -104,7 +104,7 @@ It can be used with one or multiple actions.
:size="size"
variant="success">
<template #icon>
<Video
<IconVideoOutline
:size="20" />
</template>
Example text
Expand All @@ -114,7 +114,7 @@ It can be used with one or multiple actions.
:size="size"
variant="warning">
<template #icon>
<Video
<IconVideoOutline
:size="20" />
</template>
Example text
Expand All @@ -124,7 +124,7 @@ It can be used with one or multiple actions.
:size="size"
variant="error">
<template #icon>
<Video
<IconVideoOutline
:size="20" />
</template>
Example text
Expand All @@ -135,11 +135,13 @@ It can be used with one or multiple actions.

</template>
<script>
import Video from 'vue-material-design-icons/Video.vue'
import IconVideo from 'vue-material-design-icons/Video.vue'
import IconVideoOutline from 'vue-material-design-icons/VideoOutline.vue'

export default {
components: {
Video,
IconVideo,
IconVideoOutline,
},
data() {
return {
Expand Down
14 changes: 7 additions & 7 deletions src/components/NcChip/NcChip.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,26 +9,26 @@
<template>
<div style="display: flex; gap: 8px; flex-wrap: wrap;">
<NcChip text="Notes.txt" />
<NcChip text="Files" :icon-path="mdiFile" />
<NcChip text="Color" :icon-path="mdiPalette" variant="tertiary" />
<NcChip text="Files" :icon-path="mdiFileOutline" />
<NcChip text="Color" :icon-path="mdiPaletteOutline" variant="tertiary" />
<NcChip text="Current time" :icon-path="mdiClock" no-close variant="primary" />
<NcChip text="Canceled" :icon-path="mdiCancel" variant="error" no-close />
<NcChip text="Open" :icon-path="mdiCircle" variant="success" no-close />
<NcChip text="Open" :icon-path="mdiCircleOutline" variant="success" no-close />
<NcChip text="Due tomorrow" :icon-path="mdiAlertCircleOutline" variant="warning" no-close />
</div>
</template>
<script>
import { mdiClock, mdiFile, mdiPalette, mdiCancel, mdiCircle, mdiAlertCircleOutline } from '@mdi/js'
import { mdiClock, mdiFileOutline, mdiPaletteOutline, mdiCancel, mdiCircleOutline, mdiAlertCircleOutline } from '@mdi/js'

export default {
setup() {
return {
mdiAlertCircleOutline,
mdiCancel,
mdiCircle,
mdiCircleOutline,
mdiClock,
mdiFile,
mdiPalette,
mdiFileOutline,
mdiPaletteOutline,
}
}
}
Expand Down
8 changes: 4 additions & 4 deletions src/components/NcDashboardWidget/NcDashboardWidget.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,8 +94,8 @@ export default {
const myItems = [
{
id: '1',
targetUrl: 'https://target.org',
avatarUrl: 'https://avatar.url/img.png',
targetUrl: 'https://example.tld',
avatarUrl: 'https://example.tld/img.png',
avatarUsername: 'Robert',
avatarIsNoUser: true,
overlayIconUrl: '/svg/core/actions/sound?color=000',
Expand All @@ -104,8 +104,8 @@ const myItems = [
},
{
id: '2',
targetUrl: 'https://other-target.org',
avatarUrl: 'https://other-avatar.url/img.png',
targetUrl: 'https://example.tld',
avatarUrl: 'https://example.tld/img.jpg',
overlayIconUrl: '/svg/core/actions/add?color=000',
mainText: 'Second item text',
subText: 'Second item subtext',
Expand Down
22 changes: 11 additions & 11 deletions src/components/NcIconSvgWrapper/NcIconSvgWrapper.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,33 +30,33 @@ Render raw SVG string icons.
</NcButton>
<NcButton aria-label="Send">
<template #icon>
<NcIconSvgWrapper :path="mdiSend" name="Send" />
<NcIconSvgWrapper :path="mdiSendOutline" name="Send" />
</template>
</NcButton>
<NcButton aria-label="Star">
<template #icon>
<NcIconSvgWrapper :path="mdiStar" name="Star" />
<NcIconSvgWrapper :path="mdiStarOutline" name="Star" />
</template>
</NcButton>
</div>
</template>

<script>
import closeSvg from '@mdi/svg/svg/close.svg?raw'
import cogSvg from '@mdi/svg/svg/cog.svg?raw'
import cogSvg from '@mdi/svg/svg/cog-outline.svg?raw'
import plusSvg from '@mdi/svg/svg/plus.svg?raw'
import { mdiSend } from '@mdi/js'
import { mdiStar } from '@mdi/js'
import { mdiSendOutline } from '@mdi/js'
import { mdiStarOutline } from '@mdi/js'

export default {
setup() {
// This icons are static data, so you do not need to put them into `data` which will make them reactive
// These icons are static data, so you do not need to put them into `data` which will make them reactive
return {
closeSvg,
cogSvg,
plusSvg,
mdiSend,
mdiStar,
mdiSendOutline,
mdiStarOutline,
}
},
}
Expand All @@ -76,16 +76,16 @@ export default {
```vue
<template>
<p>
This is my <NcIconSvgWrapper inline :path="mdiStar" /> Favorite
This is my <NcIconSvgWrapper inline :path="mdiStarOutline" /> Favorite
</p>
</template>
<script>
import { mdiStar } from '@mdi/js'
import { mdiStarOutline } from '@mdi/js'

export default {
setup() {
return {
mdiStar,
mdiStarOutline,
}
},
}
Expand Down
24 changes: 16 additions & 8 deletions src/components/NcListItem/NcListItem.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
</template>
<template #indicator>
<!-- Color dot -->
<CheckboxBlankCircle :size="16" fill-color="#fff" />
<CheckboxBlankCircleOutline :size="16" fill-color="#fff" />
</template>
<template #actions>
<NcActionButton>
Expand Down Expand Up @@ -314,17 +314,17 @@ The `actions-icon` slot can be used to pass icon to the inner NcActions componen
<template #extra-actions>
<NcButton variant="tertiary">
<template #icon>
<IconPencil :size="20" />
<IconPencilOutline :size="20" />
</template>
</NcButton>
<NcButton variant="tertiary">
<template #icon>
<IconCog :size="20" />
<IconCogOutline :size="20" />
</template>
</NcButton>
</template>
<template #actions-icon>
<IconNoteText :size="20" />
<IconNoteTextOutline :size="20" />
</template>
<template #actions>
<NcActionButton>
Expand All @@ -342,14 +342,20 @@ The `actions-icon` slot can be used to pass icon to the inner NcActions componen
</template>
<script>
import IconCog from 'vue-material-design-icons/Cog.vue'
import IconCogOutline from 'vue-material-design-icons/CogOutline.vue'
import IconNoteText from 'vue-material-design-icons/NoteText.vue'
import IconNoteTextOutline from 'vue-material-design-icons/NoteTextOutline.vue'
import IconPencil from 'vue-material-design-icons/Pencil.vue'
import IconPencilOutline from 'vue-material-design-icons/PencilOutline.vue'

export default {
components: {
IconCog,
IconCogOutline,
IconNoteText,
IconNoteTextOutline,
IconPencil,
IconPencilOutline,
},
}
</script>
Expand All @@ -368,14 +374,14 @@ The `actions-icon` slot can be used to pass icon to the inner NcActions componen
<NcListItem compact
name="Name of the element">
<template #icon>
<IconNoteText :size="20" />
<IconNoteTextOutline :size="20" />
</template>
</NcListItem>
<NcListItem compact
name="Name of the element"
:counter-number="1">
<template #icon>
<IconNoteText :size="20" />
<IconNoteTextOutline :size="20" />
</template>
<template #subname>
This one is with subname
Expand All @@ -393,7 +399,7 @@ The `actions-icon` slot can be used to pass icon to the inner NcActions componen
name="Name of the element"
:counter-number="3">
<template #icon>
<IconNoteText :size="20" />
<IconNoteTextOutline :size="20" />
</template>
<template #subname>
This one is with subname
Expand All @@ -412,7 +418,7 @@ The `actions-icon` slot can be used to pass icon to the inner NcActions componen
:counter-number="4"
href="https://nextcloud.com">
<template #icon>
<IconNoteText :size="20" />
<IconNoteTextOutline :size="20" />
</template>
<template #subname>
This one is with an external link
Expand All @@ -422,10 +428,12 @@ The `actions-icon` slot can be used to pass icon to the inner NcActions componen
</template>
<script>
import IconNoteText from 'vue-material-design-icons/NoteText.vue'
import IconNoteTextOutline from 'vue-material-design-icons/NoteTextOutline.vue'

export default {
components: {
IconNoteText,
IconNoteTextOutline,
},
}
</script>
Expand Down
Loading
Loading