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

Merged
susnux merged 1 commit into from
Nov 20, 2025
Merged

[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
96 changes: 48 additions & 48 deletions src/components/NcAppSidebar/NcAppSidebar.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,34 +24,34 @@ Using `v-show` directly will result in usability issues due to internal focus tr
subname="last edited 3 weeks ago">
<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 tab content
</NcAppSidebarTab>
<NcAppSidebarTab name="Sharing" id="share-tab">
<template #icon>
<ShareVariant :size="20" />
<IconShareVariantOutline :size="20" />
</template>
Sharing tab content
</NcAppSidebarTab>
</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 All @@ -76,19 +76,19 @@ Single tab is rendered without navigation.
subname="last edited 3 weeks ago">
<NcAppSidebarTab name="Settings" id="settings-tab">
<template #icon>
<Cog :size="20" />
<IconCogOutline :size="20" />
</template>
Single tab content
</NcAppSidebarTab>
</NcAppSidebar>
</div>
</template>
<script>
import Cog from 'vue-material-design-icons/Cog.vue'
import IconCogOutline from 'vue-material-design-icons/CogOutline.vue'

export default {
components: {
Cog,
IconCogOutline,
},
data() {
return {
Expand All @@ -112,35 +112,35 @@ 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>
</NcAppSidebar>
</div>
</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 All @@ -160,34 +160,34 @@ export default {
subname="last edited 3 weeks ago">
<NcAppSidebarTab name="Search" id="search-tab" :order="3">
<template #icon>
<Magnify :size="20" />
<IconMagnify :size="20" />
</template>
Search tab content
</NcAppSidebarTab>
<NcAppSidebarTab name="Settings" id="settings-tab" :order="2">
<template #icon>
<Cog :size="20" />
<IconCogOutline :size="20" />
</template>
Settings tab content
</NcAppSidebarTab>
<NcAppSidebarTab name="Sharing" id="share-tab" :order="1">
<template #icon>
<ShareVariant :size="20" />
<IconShareVariantOutline :size="20" />
</template>
Sharing tab content
</NcAppSidebarTab>
</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,
},
}
</script>
Expand All @@ -205,35 +205,35 @@ 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>
</NcAppSidebar>
</div>
</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 @@ -345,17 +345,17 @@ A working alternative would be using an icon together with an `aria-label`:
:empty="true">
<NcEmptyContent name="Content not found.">
<template #icon>
<Magnify :size="20" />
<IconMagnify :size="20" />
</template>
</NcEmptyContent>
</NcAppSidebar>
</template>
<script>
import Magnify from 'vue-material-design-icons/Magnify.vue'
import IconMagnify from 'vue-material-design-icons/Magnify.vue'

export default {
components: {
Magnify,
IconMagnify,
},
}
</script>
Expand Down Expand Up @@ -389,7 +389,7 @@ Note: the built-in toggle button is only available then NcAppSidebar is used in
subname="last edited 3 weeks ago">
<NcAppSidebarTab name="Settings" id="settings-tab">
<template #icon>
<Cog :size="20" />
<IconCogOutline :size="20" />
</template>
Single tab content
</NcAppSidebarTab>
Expand All @@ -398,11 +398,11 @@ Note: the built-in toggle button is only available then NcAppSidebar is used in
</template>

<script>
import Cog from 'vue-material-design-icons/Cog.vue'
import IconCogOutline from 'vue-material-design-icons/CogOutline.vue'

export default {
components: {
Cog,
IconCogOutline,
},
data() {
return {
Expand Down Expand Up @@ -470,7 +470,7 @@ If the sidebar should be shown conditionally without any explicit toggle button,
@close="showSidebar = false">
<NcAppSidebarTab name="Settings" id="settings-tab">
<template #icon>
<Cog :size="20" />
<IconCogOutline :size="20" />
</template>
Single tab content
</NcAppSidebarTab>
Expand All @@ -479,11 +479,11 @@ If the sidebar should be shown conditionally without any explicit toggle button,
</template>

<script>
import Cog from 'vue-material-design-icons/Cog.vue'
import IconCogOutline from 'vue-material-design-icons/CogOutline.vue'

export default {
components: {
Cog,
IconCogOutline,
},
data() {
return {
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
Loading
Loading