14-day Cloud trial
Start today. For free.

One editor. 50+ features. Zero constraints. After your trial, retain the advanced features.

Try Professional Plan for FREE
PricingContact Us
Log InGet Started Free

How to set up Blade Icons in Laravel

March 5th, 2024

5 min read

Blade icons represented by different colorful icons looked after by the PHP logo

Written by

Joe Robinson

Category

How-to Use TinyMCE

Slow development speed adds significant risk to your application launch. The risk intensifies when you're building every feature from scratch. On the other hand, selecting third party packages or libraries and bundling them up with your application can also add risk through the ever-expanding list of dependencies to manage. That’s why you need to be able to clearly see the benefits and risks of selecting third party packages or components.

At Tiny, while developing our rich text editor, we're constantly building content that helps our community find beneficial pathways to finishing their projects. In this guide, you'll find an example of how you can quickly finish your project, and avoid dependency issues – by making use of TinyMCE alongside other reliable components.

Blade Icons are an example of a reliable component for your application’s design. And this guide demonstrates how you can make use of TinyMCE, Blade Icons, and the Laravel framework to get a demo application running quickly.

TL;DR

  • The demo is based on an Email Editor solution, and you can go directly to the demo to see the steps involved.
  • Blade Icons are designed to be fast to install: include them with Composer, and then reference them in your Laravel view files for an easier Laravel icons solution.

What are Blade Icons?

Blade Icons are a package designed for easily making SVG icons available in your Laravel project. Compared to a Laravel Font Awesome solution, Blade Icons don’t require as much time and effort to configure, because the Font Awesome icons need configuration within the Laravel app.css file, along with other bundling steps to configure. 

Where to get Blade Icons for Laravel

The Blade Icons library is available for you to search for a specific SVG icon. Once you’ve selected your icons, getting Blade Icons into your Laravel application requires only two steps. For example, with an email editor, getting an envelope icon involves:

  1. Use the Composer to install the icon: composer require blade-ui-kit/blade-heroicons
  2. Reference the icon in your Laravel Views file: <x-heroicon-o-envelope />

How to set up Blade Icons

Email editors provide a design and content platform for shaping emails before they’re sent out to customers. Here’s how to get started setting up Blade Icons with TinyMCE in Laravel to quickly set up Laravel icons for your project.

There are some prerequisites:

  • Laravel installed within your development environment
    Access to the command line on your development environment, such as through Bash or Shell, depending on your operating system
  • A text editor to modify the Laravel application files, such as Zed, VS Code, or Sublime Text
  • A TinyMCE API key, which is necessary to access TinyMCE through the Tiny Cloud CDN

About your API key: You can get a TinyMCE API key for FREE from the TinyMCE dashboard. Log in with your Google or GitHub credentials, and it’s available as soon as the dashboard loads. Tiny Cloud requires an API key for the editor to switch from read-only mode.

💡NOTE: Your API key comes with a 14-day Free trial of TinyMCE that includes more advanced plugins, for example, Accessibility Checker and PowerPaste (that are used in the following email editor demo). 

1. Getting started with Laravel

Open your command line shell program, and use the Composer command to create the email editor demo:

composer create-project laravel/laravel email-editor-demo

You can then change into the project, and run the following Laravel commands to create the needed Blade files to configure TinyMCE:

The configuration file:

cd email-editor-demo
php artisan make:component Head/tinymceConfig
INFO  Component [app/View/Components/Head/tinymceConfig.php] created successfully.

And the TinyMCE forms file:

php artisan make:component Forms/tinymceEditor
INFO  Component [app/View/Components/Forms/tinymceEditor.php] created successfully.

2. Constructing the Email editor with TinyMCE

There are now new files ready in your demo email editor within the important app/ folder, and the resources/ folder. Here’s how the demo directory structure looks, for the app/ folder:

app/
    View/
        Components/
            Forms/ > tinymceEditor.php
            Head/ > tinymceConfig.php

And for the resources/ folder:

resources/
    views/
        components/
            forms/ > tinymce-editor.blade.php
            head/ > tinymce-config.blade.php

Open the tinymce-config.blade.php file in your text editor, and include the following:

<script src="https://cdn.tiny.cloud/1/add-your-api-key-here/tinymce/6/tinymce.min.js"
    referrerpolicy="origin"></script>
<script>
    tinymce.init({
        selector: '#editor',
        plugins: 'advcode advtemplate a11ychecker autocorrect autolink emoticons image inlinecss link linkchecker lists mergetags powerpaste tinymcespellchecker help',
        toolbar: 'undo redo | aidialog aishortcuts | styles | bold italic forecolor | link image emoticons | align | mergetags inserttemplate | spellcheckdialog a11ycheck | code removeformat',
        toolbar_sticky: true,
        menubar: false,
        editable_root: false,
        editable_class: 'tiny-editable',
        elementpath: false,
        visual: false,
        link_target_list: false,
        link_list: [
            { title: "Features", value: 'https://www.tiny.cloud/tinymce/features/' },
            { title: "Docs", value: 'https://www.tiny.cloud/docs/tinymce/latest/' },
            { title: "Pricing", value: 'https://www.tiny.cloud/pricing/' }
        ],
        object_resizing: false,
        formats: {
            h1: { block: 'h1', styles: { fontSize: '24px', color: '#335dff' } },
            h2: { block: 'h2', styles: { fontSize: '20px' } },
            largetext: { block: 'p', styles: { fontSize: '20px' } },
            calltoaction: { selector: 'a', styles: { backgroundColor: '#335dff', padding: '12px 16px', color: '#ffffff', borderRadius: '4px', textDecoration: 'none', display: 'inline-block' } }
        },
        style_formats: [
            { title: 'Paragraph', format: 'p' },
            { title: 'Heading 1', format: 'h1' },
            { title: 'Heading 2', format: 'h2' },
            { title: 'Large text', format: 'largetext' },
            { title: 'Button styles' },
            { title: 'Call-to-action', format: 'calltoaction' },
        ],
        ai_shortcuts: [
            { title: 'Format as marketing email', prompt: 'Turn this content into an HTML-formatted marketing email in fixed-width and mobile-friendly table form, following screen width best practices' },
            { title: 'Generate call to action', prompt: 'Generate an appropriate and short call to action for this email, in the form a button.' }
        ],
        images_file_types: "jpeg,jpg,png,gif",
        spellchecker_ignore_list: ['i.e', 'Mailchimp', 'CSS-inlined'],
        mergetags_list: [
            {
                title: "Contact",
                menu: [{
                    value: 'Contact.FirstName',
                    title: 'Contact First Name'
                },
                {
                    value: 'Contact.LastName',
                    title: 'Contact Last Name'
                },
                {
                    value: 'Contact.Email',
                    title: 'Contact Email'
                }
                ]
            },
            {
                title: "Sender",
                menu: [{
                    value: 'Sender.FirstName',
                    title: 'Sender First Name'
                },
                {
                    value: 'Sender.LastName',
                    title: 'Sender Last name'
                },
                {
                    value: 'Sender.Email',
                    title: 'Sender Email'
                }
                ]
            },
            {
               title: 'Subscription',
                menu: [{
                    value: 'Subscription.UnsubscribeLink',
                    title: 'Unsubscribe Link'
                },
                {
                    value: 'Subscription.Preferences',
                    title: 'Subscription Preferences'
                }
                ]
            }
        ],
        advtemplate_templates: [
            {
                title: "Newsletter intro",
                content:
                    '<h1 style="font-size: 24px; color: rgb(51, 93, 255); font-family:Arial;">TinyMCE Newsletter</h1>\n<p style="font-family:Arial;">Welcome to your monthly digest of all things TinyMCE, where you"ll find helpful tips, how-tos, and stories of how people are using rich text editing to bring their apps to new heights!</p>',
            },
            {
                title: "CTA Button",
                content:
                    '<p><a style="background-color: rgb(51, 93, 255); padding: 12px 16px; color: rgb(255, 255, 255); border-radius: 4px; text-decoration: none; display: inline-block; font-family:Arial;" href="<a href="https://tiny.cloud/pricing">https://tiny.cloud/pricing</a>">Get started with your 14-day free trial</a></p>',
            },
            {
                title: "Footer",
                content:
                    '<p style="text-align: center; font-size: 10px; font-family:Arial;">You received this email at because you previously subscribed.</p>\n<p style="text-align: center; font-size: 10px; font-family:Arial;">#{Subscription.Preferences}# | #{Subscription.UnsubscribeLink}#</p>',
            },
        ],
        content_style: `
  body {
    background-color: #f9f9fb;
  }
  /* Edit area functional css */
  .tiny-editable {
    position: relative;
  }
  .tiny-editable:hover:not(:focus),
  .tiny-editable:focus {
    outline: 3px solid #b4d7ff;
    outline-offset: 4px;
  }
  /* Create an edit placeholder */
  .tiny-editable:empty::before,
  .tiny-editable:has(> br[data-mce-bogus]:first-child)::before {
    content: "Write here...";
    position: absolute;
    top: 0;
    left: 0;
    color: #999;
  }
`
    });
</script>

Save the change, and then open the tinymce-editor.blade.php, and add the following:

<form method="post">
  <textarea id="editor">
<table border="0" width="100%" style="max-width: 660px; width: 100%; background-color: #0b132c; border: 2px solid #eee; border-radius: 8px 8px 0 0; overflow: hidden" cellpadding="0" cellspacing="0">
   <tr>
     <td style="padding: 32px 8px 16px 64px;" width="50%">
       <div class="tiny-editable" style="font-family: 'helvetica', sans-serif; color: #fff; font-size: 16px; line-height: 1.5;">
         <h1>Email creation made simple!</h1>
       </div>
     </td>
   </tr>
</table>
  </textarea>
</form>

Save this change as well.

3. Adding Blade Icons

Navigate to the Blade Icons library, and search for Envelope Icons, for example, these three, and the associated composer commands:

  1. Heroicon Envelope - composer require blade-ui-kit/blade-heroicons
  2. Zondicon Envelope - composer require blade-ui-kit/blade-zondicons
  3. Evilicons Envelope - composer require codeat3/blade-evil-icons

✏️NOTE: Install these icons by changing back to the top level of the demo Laravel email app, and running the composer require commands from the command line. That’s all you need to do to get the Blade Icons.

Modify the welcome.blade.php file, that’s automatically generated with each new Laravel application, to include the TinyMCE email editor, and the Blade Icons by adding these lines into the PHP file:

In the head section:

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
     <title>Laravel</title>
     <!-- TinyMCE -->
     <x-head.tinymce-config/>

And in the body section, to configure TinyMCE, and the Blade Icons:

…
@endif  
        <div class="max-w-7xl mx-auto p-6 lg:p-8">
<!-- HTML content not added due to its length -->
             </div>
             
            <div class="bg-white dark:ring-1 dark:ring-inset dark:ring-white/5 rounded-lg">
             <div class="h-16 w-16 bg-red-50 dark:bg-red-800/20 flex items-center justify-center rounded-full">
               <x-heroicon-o-envelope />
             </div>
             <div class="h-16 w-16 bg-red-50 dark:bg-red-800/20 flex items-center justify-center rounded-full">
               <x-zondicon-envelope />
             </div>
             <div class="h-16 w-16 bg-red-50 dark:bg-red-800/20 flex items-center justify-center rounded-full">
               <x-bx-envelope />
             </div>
            </div>
 
             <x-forms.tinymce-editor/>

✏️NOTE: The div elements around the Blade Icons make use of the existing classes and styles available with the demo Laravel project to show what’s possible in terms of styling the Blade icons for the email editor. It’s useful for the first iteration, but not complete for a production environment.

Save the change, and then use the Laravel php artisan serve command to get the email editor demo with Blade Icons started on your local host:

The Email example working with Blade Icons in LaravelThe Blade Icons are available in your demo email editor app, along with TinyMCE, which is ready to go for building emails.

Laravel, icons, and more components

The demo is only the first step, but demonstrates how quickly you can shape the design of your Laravel projects with Blade Icons, as well as incorporate TinyMCE for a reliable and effortlessly customizable rich text editor.

TinyMCE has dedicated integrations available for more than just Laravel, with components available for the frameworks favored by professional developers:

Contact us for more information about how TinyMCE can help add speed to your project, and help you reach the next, complete iteration.

DesignProductivityProduct Management
byJoe Robinson

Technical and creative writer, editor, and a TinyMCE advocate. An enthusiast for teamwork, open source software projects, and baking. Can often be found puzzling over obscure history, cryptic words, and lucid writing.

Related Articles

  • How-to Use TinyMCEApr 16th, 2024

    How to enable a Bootstrap WYSIWYG editor: a step-by-step guide

Join 100,000+ developers who get regular tips & updates from the Tiny team.

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Tiny logo

Stay Connected

SOC2 compliance badge

Products

TinyMCEDriveMoxieManager
© Copyright 2024 Tiny Technologies Inc.

TinyMCE® and Tiny® are registered trademarks of Tiny Technologies, Inc.