# VuePress Tutorial 20 - Pagination Links Styling

By: J the Code Monkey

•Posted: Nov 23, 2022 •Updated: Jul 3, 2024

# What We're Doing

We're going to begin the process of styling the Prev and Next pagination links that we added to each of the pagination pages in the previous tutorial. To implement the styling we'll be adding the following CSS classes pagination, left-arrow, and right-arrow to the IndexPost layout component.

The pagination class will be used to properly space out the Prev and Next pagination links. The left-arrow and right-arrow classes will be used to add some styling to the left arrow and right arrow icons which we'll be adding using the global vp-icon component which is provided by vuepress-plugin-svg-icons (opens new window).

When adding the styling updates be sure to add each block of code below one at a time to your project then view the changes in the browser to get a better understanding of what each block is responsible for.

You can view all of the code in this tutorial by going to the tutorial-20 branch of the code-monkeys-blog-tutorials (opens new window) repository.

# Pagination Class

We're going to start by adding the pagination class to the div tag that is wrapping both of the router-link components in the IndexPost.vue file.

Then we'll apply the following styles:

lang="stylus" is used to specify which pre-processor we want to use in the component which in our case is Stylus (opens new window) which is the default pre-processor used by VuePress (opens new window).
scoped is used to only apply the styles to the current component, i.e., the IndexPost layout component. We're scoping these styles since they currently only apply to the IndexPost layout component.
display: flex defines a flex container for all of the direct children of the div tag with a class of pagination.
justify-content: space-between evenly spaces out the flex items along the main-axis of the flex container where the first item is flush with the start of the flex container, and the last item is flush with the end of the flex container. Here, the main-axis of the flex container is the horizontal axis. The flex items are the direct children of the div tag with a class of pagination, i.e., the div tags that are wrapping the router-link components.
padding-top: 2rem adds a padding of 2rem to the top of the div tag with a class of pagination.

The pagination links should now be properly spaced out, and you can view the styling updates by navigating to the pagination pages:

If you have any questions about the lang attribute, the scoped attribute, flexbox, or CSS in general, then check out these resources:

# Left and Right Arrow Icons

We're now ready to add the left and right arrow icons to the pagination links.

# Downloading the Icons

To add the left and right arrow icons to the site we need to first download the icons. To find icons for your site vuepress-plugin-svg-icons (opens new window) recommends using iconfont (opens new window). After searching for the icons and downloading them, you'll be asked to specify a color and size for the icons. For the blog we'll be using a color of #e6e6e6 and a size of 200 which is the default size.

Instead of searching iconfont (opens new window) for the left and right arrow icons, you can download them from the tutorial-20 branch of the code-monkeys-blog-tutorials (opens new window) repository.

Using SVG Export

To easily download the left and right arrow icons you can also install the browser extension SVG Export (opens new window). After installing the extension, all you need to do is click the extension icon which will extract all of the SVGs including their inline styles from the current page. A new tab will open containing all of the extracted SVGs which you can then download.

# Updating the Icons Directory

After downloading the left and right arrow icons, we'll need to add them to the icons directory which should now look something like this:

├── icons
│   ├── Gab.svg
│   ├── leftArrow.svg
│   ├── GitHub.svg
│   ├── RSS.svg
│   ├── Keybase.svg
│   ├── rightArrow.svg
│   ├── Telegram.svg
│   ├── Twitter.svg
│   └── YouTube.svg

# Displaying the Icons

After adding the left and right arrow icons to the icons directory, the plugin will automatically load the icons and provides the global vp-icon component. To use the vp-icon component we need to pass a name attribute to it where the value is the name of the SVG file we want to use.

Here, the value for the name attribute will be leftArrow for the Prev pagination link and rightArrow for the Next pagination link.

We're going to be adding the vp-icon components inside of the corresponding router-link components.

The IndexPost.vue file should now look like this:

To view the left and right arrow icons navigate to the pagination pages:

Notice how the left arrow icon is being displayed to the left of the Prev pagination text and how the right arrow icon is being displayed to the right of the Next pagination text. This ensures the arrows and the text look correct when being displayed.

# Styling the Icons

We're now going to add some styling to the left and right arrow icons. The IndexPost.vue file should now look like this:

padding-right: 0.25rem adds a padding of 0.25rem to the right of the vp-icon component with a class of left-arrow.
padding-left: 0.25rem adds a padding of 0.25rem to the left of the vp-icon component with a class of right-arrow.

To view the styling updates to the left and right arrow icons navigate to the pagination pages:

If you have any questions about the CSS discussed above, then check out this resource:

CSS Tutorial (opens new window)

# Optimizing the Icons

When downloading the left and right arrow icons from iconfont (opens new window), the icons will have a lot of redundant and useless information. We can use a Command-line Interface (CLI) command provided by vuepress-plugin-svg-icons (opens new window) to optimize the icons.

Icons Already Optimized

If you downloaded the left and right arrow icons from the repository or by using the SVG Export (opens new window) browser extension, then the icons should already be optimized and you shouldn't have to run the CLI command.

Here's the CLI command you can run to optimize the icons vuepress svgo [docsDir] where [docsDir] is the docs directory for your project which in our case is docs.

We added this CLI command to the scripts object in the package.json file in the previous post VuePress Tutorial 12 - Highlight SVGs on Hover.

Here's how to run the script:

After running the script, the icons should be optimized.

If you have questions about how the plugin implements the CLI command or about the plugin in general, then checkout the guide (opens new window).

You can also check out SVGO (opens new window) which is the optimization tool being used by the plugin to optimize the icons.

# Next Steps

In the next tutorial we're going to continue styling the IndexPost layout component by making each post in the list of posts look like a card.